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前 站 


将 HIML、CSS 和 JavaScript 结合 使 用 是 一 种 最 常用 的 网 页 布局 ，HTML 即 超 文本 标 
记 语 言 ， 它 使 用 标记 来 描述 网 页 。HTML 5 是 HTML 早期 版 本 的 自然 延续 ， 它 尽 可 能 地 满 
足 了 当前 网 站 和 未 来 网 站 的 需求 。HTML 5 从 以 前 的 版 本 中 继承 了 大 部 分 特性 ， 这 就 意味 
着 ，HTML 5 的 大 部 分 内 容 都 可 以 兼容 新 旧 浏 览 器 ， 向 后 兼容 是 HTML 5 的 一 项 重要 设计 
原则 。 

CSS 在 1996 年 正式 推出 ，HTML 诞生 几 年 之 后 才 出 现 了 CSS 的 第 一 个 版 本 ，CSS 是 
间 层 登 样式 表 ， 它 的 样式 定义 了 如 何 显示 HTML 网 页 中 的 元 素 。CSS 3 是 CSS 早期 版 本 的 
自然 延续 ， 它 比 早期 版 本 更 为 强大 ， 引 入 了 大 量 的 视觉 效果 ， 例 如 阴影 、 文 字 阴 影 、 圆 角 
和 渐变 等 。 

本 书 详细 介绍 HIML 5 和 CSS 3 的 新 增 知 识 ， 在 介绍 这 些 新 增 功能 的 同时 ， 还 会 介绍 
HTML 和 CSS 早期 版 本 的 一 些 内 容 ， 以 及 JavaScript 的 基础 知识 。 

1. 本 书 内容 

全 书 共 分 15 章 ， 主 要 内 容 如 下 。 

第 1 章 : HTML 快速 入 门 。 首 先 向 读者 介绍 HTML 的 概念 及 其 发 展 历史 ， 然 后 重点 讲 
解 HIML 4 的 文档 结构 及 其 提供 的 标记 。 

第 2 章 : CSS 基础 。 首 先 向 读者 介绍 CSS 的 概念 及 其 发 展 历史 ， 然 后 重点 介绍 CSS 2 
的 常用 语法 和 常用 样式 。 

第 3 章 : JavaScript 脚本 语言 。 从 JavaScript 脚本 的 概念 开始 介绍 ， 然 后 依次 介绍 脚本 
的 基础 语法 、 变 量 、 运 算 符 、 语 句 类 型 和 常用 对 象 等 内 容 。 

第 4 章 : 网 页 设计 实战 案例 。 向 读者 介绍 实际 网 页 设计 时 需要 掌握 的 各 种 技能 。 包 括 
网 页 设计 流程 、 网 页 设计 工具 、 网 页 布局 以 及 布局 理论 等 内 容 。 

第 5 章 : 认识 HIML 5。 着 重 介绍 HTML 5 的 知识 ， 包 括 它 的 发 展 历史 和 趋势 、 三 大 
组 织 、 基 本 语法 、 新 增 的 表单 、 元 素 以 及 属性 等 多 种 内 容 。 

第 6 章 : HTML 5 快速 入 门 。 介 绍 HTML 5 中 新 增 的 不 同类 型 的 元 素 ， 例 如 结构 元 
素 、 分 组 元 素 、 文 本 语义 元 素 、 交 互 元 素 、 音 频 和 视频 元 素 等 。 另 外 ， 还 对 HIML 5 中 常 
用 的 几 个 标准 属性 进行 介绍 。 

第 7 章 : HIML 5 新 型 表单 的 使 用 。 从 表单 开始 介绍 ， 接 着 介绍 HTML 5 中 新 增 的 表 
单元 素 、 输 入 类 型 、 表 单 属性 和 表单 验证 这 4 个 知识 点 。 

第 8 章 : HTML 5 操作 页 面 图 形 。 重 点 介绍 canvas 元 素 及 其 API 如 何 绘制 图 形 并 对 图 
形 进行 操作 。 这 些 图 形 包 括 文 本 、 拢 形 、 线 条 、 圆 形 和 扇形 、 贝 塞 尔 曲 线 、 线 性 渐变 、 径 
向 渐变 以 及 图 像 等 。 

第 9 章 : HTML 5 的 其 他 新 特性 。 从 文件 新 增 特 性 、 拖 放 功能 、 新 增 客户 端 数据 存储 
特性 、 新 增 的 本 地 数据 库 特 性 、 跨 文档 传输 信息 、 多 线程 以 及 获取 位 置信 息 7 个 方面 介绍 


HTML 5 的 新 增 特 性 。 

第 10 章 : CSS 3 快速 入 门 。 介 绍 CSS 3 的 基础 知识 ， 包 括 CSS 3 的 发 展 、 优 缺点 和 浏 
览 器 支持 情况 ， 以 及 CSS 3 的 颜色 、 选 择 器 和 属性 等 新 增 功能 。 其 中 对 新 增 颜 色 进 行 了 详 
细 介 绍 。 

第 11 章 : CSS 3 新 增 选 择 器 。 从 属性 选择 器 、 结 构 化 伪 类 选择 器 、 目 标 伪 类 选择 器 、 
UI 元素 状态 伪 类 选择 器 、 否 定 伪 类 选择 器 和 通用 兄弟 选择 器 6 个 方面 进行 介绍 。 

第 12 章 : CSS 3 页 面 美化 样式 。 重 点 介绍 CSS 3 中 新 增 的 与 文本 、 字 体 、 背 景 和 边框 
有 关 的 样式 属性 。 

第 13 章 : CSS 3 页 面 布局 样式 。 从 多 列 布局 、 傅 模 型 和 界面 布局 三 个 方面 详细 介绍 
CSS 3 新 增 的 属性 、 语 法 格式 及 其 使 用 示例 。 

第 14 章 : CSS 3 动画 特效 。 首 先 了 解 CSS 3 中 如 何 实现 渐变 ， 接 着 介绍 CSS 3 中 新 增 
的 转换 功能 ， 然 后 介绍 与 过 渡 有 关 的 属性 ， 最 后 对 CSS 3 的 动画 功能 进行 说 明 。 

第 15 章 : HTML 5 + CSS 3 页 面 案例 。 结 合 HTML 5、CSS 5、JavaScript 和 jQuery 等 
多 种 技术 实现 贪 吃 蛇 游戏 。 


2. 本 书 特 色 


本 书 内 容 详 细 、 示 例 丰 富 、 知 识 面 广 ， 全 面 地 讲解 了 HTML 5 和 CSS 3 的 应 用 和 开 
发 。 与 已 经 出 版 的 同类 图 书 相 比 ， 这 本 图 书 的 最 大 特点 体现 在 如 下 几 个 方面 。 

(1) 知识 全 面 ， 内 容 丰 富 

本 书 紧密 围绕 HTML 5 和 CSS 3 的 新 增 知识 展开 详细 的 讲解 ， 涵 盖 了 实际 开发 应 用 中 
的 具体 应 用 代码 。 

(2) 理论 和 示例 结合 

本 书 中 几乎 每 一 个 知识 点 都 有 丰富 而 典型 的 练习 ， 而 且 每 一 章 最 后 都 会 通过 一 个 或 多 
个 综合 的 实战 介绍 本 章 的 知识 。 作 为 一 本 HIML 5 和 CSS 3 入 门类 型 的 书 ， 作 者 把 理论 和 
练习 很 好 地 结合 起 来 进行 讲解 ， 最 容易 让 读者 快速 掌握 。 

(3) 应 用 广泛 ， 提 供 文档 

对 于 大 多 数 的 精 选 实战 案例 ， 都 会 向 读者 提供 详细 的 实现 步骤 ， 结 构 清 晰 简明 ， 分 析 
深入 浅 出 ， 而 且 有 些 实战 贴近 实际 。 

(4) 随 书 光盘 

本 书 配 备 了 视频 教学 文件 ， 包 括 每 个 章节 所 涉及 的 源 代码 、 开 发 环境 的 安装 演示 等 。 
读者 可 以 通过 视频 文件 更 加 直观 地 学 习 HIML 5 和 CSS 3 的 知识 。 

(5) 网 站 技术 支持 

读者 在 学 习 或 者 工作 的 过 程 中 ， 如 果 遇 到 实际 问题 ， 可 以 直接 登录 www-itzcn.com 与 
我 们 取得 联系 ， 作 者 会 在 第 一 时 间 内 给 予 帮助 。 
(6) 贴心 的 提示 
为 了 便于 读者 阅读 ， 全 书 还 穿插 着 一 些 技巧 、 提 示 等 小 贴 士 ， 体 例 约定 如 下 。 
@ ”提示 : 通常 是 一 些 贴 心 的 提醒 ， 让 读者 加 深 印 象 或 提供 建议 和 解决 问题 的 方法 。 
e@ 注意 : 提出 学 习 过 程 中 需要 特别 注意 的 一 些 知识 点 和 内 容 ， 或 者 相关 信息 。 
@ ”技巧 : 通过 简短 的 文字 ， 指 出 知识 点 在 应 用 时 的 一 些小 窍门 。 


3. 读者 对 象 言 
本 书 适合 作为 软件 开发 入 门 者 的 自学 用 书 ， 也 适合 作为 高 等 院 校 相关 专业 的 教学 参考 
还 可 供 开发 人 员 查 阅 、 参 考 。 
主要 读者 对 象 包括 : 
@ HTML5 和 CSS3 开发 入 门 者 。 

@ HTML 5 和 CSS 初学 者 以 及 在 校 学 生 。 

@ 各 大 、 中 专 院 校 的 在 校 学 生 和 相关 授课 老师 。 

@ 准备 从 事 与 HIML 5 和 CSS 3 应 用 相关 的 工作 人 员 。 

除了 封面 署名 作者 之 外 ， 参 与 本 书 编写 的 人 员 还 有 程 朝 斌 、 王 咏 梅 、 郝 军 启 、 王 慧 、 
郑 小 营 、 张 浩 华 、 王 超 英 、 张 凡 、 赵 振 方 、 张 艳 梅 等 ， 在 此 表示 感谢 。 

在 本 书 的 编写 过 程 中 ， 我 们 力求 精益 求 精 ， 但 难免 存在 一 些 不 足 之 处 ， 敬 请 广大 读者 
批评 指正 。 
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HTML 快 速 入 门 


HTML 是 Hypertext Markup Language( 超 文本 标记 语言 ) 的 简称 ， 它 通过 标记 
符号 来 标记 要 显示 的 网 页 中 的 各 个 部 分 。HTML 语言 是 制作 网 页 的 基础 语言 。 
作为 一 个 网 页 制作 爱好 者 或 者 专业 的 网 页 设计 师 ，HTML 语言 知识 是 不 可 或 缺 
的 。 因 此 ， 在 学 习 HTML 5 技术 之 前 ， 掌 握 HIML 的 基础 是 非常 必要 的 。 

本 章 首 先 向 读者 介绍 HTML 的 概念 及 其 发 展 历史 ， 然 后 重点 讲解 HTML 4 
的 文 寿 结构 及 其 提供 的 标记 。 


本 章 学 习 目标 : 

NN 了 解 HIML 的 发 展 历史 

和 掌握 HIML 文档 结构 中 每 个 标记 的 使 用 

和 掌握 元 信息 、 字 体 、 超 链接 、 水 平 线 标记 和 段落 
标记 的 使 用 

掌握 编号 列表 、 符 号 列表 和 说 明 列表 标记 的 使 用 
掌握 定义 表格 的 方法 

掌握 表格 、 行 和 列 的 常用 属性 
掌握 创建 表单 的 方法 

熟悉 常用 的 表单 元 素 
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1.1 HTML 的 概念 


HTML 用 标记 来 表示 网 页 中 的 文本 及 图 像 等 元 素 ， 并 规定 浏览 器 如 何 显示 这 些 元 素 ， 
及 如 何 响应 用 户 的 行为 ， 是 标准 通用 标记 语言 (Standard Generalized Markup Language， 
SGML) 的 一 种 应 用 。 

HTML 是 在 1989 年 被 Web 的 发 明 者 提出 的 ， 它 的 标准 由 万 维 网 协会 (W3C) 负 责 制 
定 ， 还 推出 了 DHTML (动态 HTML) 和 XML 语言 。 所 有 的 网 页 都 是 以 HTML 格式 的 文件 
作为 基础 ， 再 加 上 一 些 其 他 的 语言 构成 的 。 

(1) HTML 2.0 

HTML 2.0 是 1996 年 由 Intemet 工程 工作 小 组 的 HTML 工作 组 开发 的 。 

(2) HTML 3.2 

HTML 3.2 作为 W3C 标准 ， 发 布 于 1997 年 1 月 14 日 。HTML 3.2 向 HIML 2.0 标准 
添加 了 被 广泛 运用 的 特性 ， 如 字体 、 表 格 、Applet、 围 绕 图 像 的 文本 流 、 上 标 和 下 标 等 

(3) HIML 4.0 

作为 W3C 推荐 的 一 项 标准 ，HTML 4.0 发 布 于 1997 年 12 月 18 日 。 而 仅仅 进行 了 一 
些 编辑 修正 的 第 二 个 版 本 发 布 于 1998 年 4 月 24 日 。HTML 4.0 最 重要 的 特性 是 引入 了 样 
式 表 (CSS)。 

(4) HIML 4.01 

作为 W3C 推荐 的 一 项 标准 ，HTML 4.01 发 布 于 1999 年 12 月 24 日。HTML 4.01 是 对 
HTML 4.0 的 一 次 较 小 的 更 新 ， 对 后 者 进行 了 修正 和 漏洞 修复 。W3C 不 想 继续 发 展 HIML， 
打算 把 未 来 的 工作 集中 在 XHTML 上 。 

(5) XHTML 1.0( 可 扩展 的 超 文本 标记 语言 

XHTML 1.0 使 用 XML 对 HTML 4.01 进行 了 重新 表示 。 

作为 W3C 推荐 的 一 项 标准 ，XHTML 1.0 发 布 于 2000 年 1 月 20 日 。XHTML 1.0 是 作 

一 种 XML 应 用 被 重新 定义 的 HIML， 其 目标 是 取代 HIML 4.01。 

XHTML 1.0 与 HIML 4.01 最 大 的 区 别 就 是 语法 要 求 更 加 严格 ， 所 有 标记 由 DTD 规则 
来 定义 ， 而 且 可 以 自 定义 标记 ， 文 档 的 结构 也 更 清晰 。 

(6) HIML 5S 

为 了 推动 Web 标准 化 的 发 展 ， 一 些 互联 网 公司 联合 起 来 成 立 了 WHATWG 组 织 。 
WHATWG 组 织 致 力 于 Web 表单 和 应 用 程序 ， 而 W3C 专注 于 XHTML 2.0。 在 2006 年 ， 
双方 决定 进行 合作 ， 来 创建 一 个 新 版 本 的 HTML。 

HTML 5 草案 的 前 身 名 为 Web Applications 1.0， 它 于 2004 年 被 WHATWG 提出 ， 于 
2007 年 被 W3C 接纳 ， 并 成 立 了 新 的 HTML 工作 团队 。 

HTML 5 的 第 一 份 正 式 草案 已 于 2008 年 1 月 22 日 公布 ， pie ts 2010 年 6 月 
24 虽然 HTML 5 仍然 处 于 完善 之 中 ， 但 是 大 部 分 主流 的 浏览 器 已 经 具备 了 HIML 5 的 
运行 环境 . 因此 ， 可 以 说 HTML 5 将 引领 Web ie 并 掀起 一 轮 学 习 
HTML 5 的 热潮 。 


1.2 HTML 的 文档 结构 


开发 人 员 使 用 HTML 所 编写 的 超 文本 文档 称 为 HTML 文档 ， 它 能 独立 于 各 种 操作 系 
统 平台 

HTML 有 自己 的 语法 格式 和 编写 规范 ， 这 些 都 是 由 HTML 规范 所 定义 的 ， 下 面 详 细 介 
绍 HTML 文档 的 规范 及 结构 。 


(21 文档 编写 规范 


HTML 文档 是 由 一 系列 的 元 素 和 标记 组 成 的 。 一 个 完整 的 HTML 文档 至 少 应 该 包括 
<!DOCTYPE> 标 记 、html 元 素 、head 元 素 、title 元 素 和 body 元 素 。 元 素 名 不 区 分 大 小 
写 ; 标记 用 于 规定 元 素 的 属性 和 它 在 文档 中 的 位 置 。 

1. HTML 标 记 


HTML 标记 可 分 为 成 对 标记 和 单独 标记 两 种 。 多 数 标 记 成 对 出 现 ， 由 开始 标记 和 结束 
标记 组 成 。 开 始 标记 的 格式 为 “< 元 素 名 称 >”， 结 束 标 记 的 格式 为 “</ 元 素 名 称 >”， 其 
完整 语法 格式 如 下 : 

< 元 素 名 称 > 元 素 内 容 </ 元 素 名 称 > 

成 对 标记 仅 对 包含 在 其 中 的 元 素 内 容 发 生 作用 ， 如 <tile> 和 </title> 标 记 用 于 定义 页 面 
标题 元 素 的 范围 。 也 就 是 说 ，<title> 和 <title> 标 记 之 间 的 部 分 是 此 HTML 文档 的 标题 。 

单独 标记 的 格式 为 “< 元 素 名 称 >”， 其 作用 是 在 相应 的 位 置 插入 元 素 。 例 如 <hr> 标 记 
便 是 在 该 标记 所 在 位 置 插入 一 个 水 平 线 。 

在 HTML 标记 中 还 可 以 设置 一 些 属性 ， 控 制 HTML 标记 所 建立 的 元 素 。 这 些 属 性 将 
位 于 所 建立 元 素 的 开始 标记 中 ， 其 基本 语法 格式 如 下 : 

< 元 素 名 称 属性 1=" 值 1" 属性 2=" 值 2" ...> 

因此 ， 在 HTML 文档 中 某 个 元 素 的 完整 定义 语法 如 下 : 

< 元 素 名 称 属性 1=" 值 1" 属性 2=" 值 2"” . . .> 元 素 内 容 </ 元 素 名 称 > 


T> 徊 这 TANLH 者 :直人 


| 


2，HTML 元素 
当 用 一 组 HTML 标记 将 一 段 文字 包含 在 中 间 时 ， 这 段 包含 文字 的 HTML 标记 被 称 为 
一 个 元 素 。 在 HTML 语法 中 ， 每 个 由 HTML 标记 与 文档 所 形成 的 元 素 内 ， 还 可 以 包含 另 
一 个 元 素 。 因 此 整个 HTML 文档 就 像 是 一 个 大 元 素 包 含 了 许多 小 元 素 。 

在 所 有 的 HTML 文档 中 ， 最 外 层 的 元 素 由 <html> 标 记 建 立 。 在 <html> 标 记 所 建立 的 元 
素 中 包含 了 两 个 主要 的 标记 ， 这 两 个 标记 是 <head> 标 记 和 <body> 标 记 。<head> 标 记 所 建立 
的 元 素 内 容 为 头 部 元 素 ， 而 <body> 所 建立 的 元 素 内 容 为 主体 元 素 。 

如 下 所 示 为 一 个 HTML 文档 的 标准 结构 : 
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<!DOCTYPE> 
<html> 
<head> 头 部 元 素 </head> 
<body> 
主体 元 素 
</body> 
</html> 


(22 文档 声明 标记 


<!DOCTYPE> 标 记 用 于 定义 有 关 文 档 格式 的 声明 ， 它 必须 写 在 HTML 文件 中 的 第 一 
行 。 使 用 格式 如 下 : 


<!DOCTYPE element-name DTD-type DTD-name DTD-ur1> 


上 述 格 式 说 明 如 下 。 

e <IDOCTYPE: 表示 开始 声明 DTD， 其 中 DOCTYPE 是 关键 字 。 

@ element-name: 指定 该 DTD 的 根 元 素 名 称 。 

@ DTD-type: 指定 该 DTD 是 属于 标准 公用 的 还 是 私人 制定 的 ， 若 设 为 PUBLIC 则 

表示 该 DTD 是 标准 公用 的 ， 如 果 设 为 SYSTEM 则 表示 是 私人 制定 的 。 

e DTD-name: 指定 该 DID 的 文件 名 称 。 

e@ DTD-url: 指定 该 DTD 文件 所 在 的 URL 网址 。 

@ >: 表示 DTD 的 结束 声明 。 

下 面 列 出 了 如 何 引 用 W3C 在 HTML 4.01 版 本 和 XHTML 中 所 制定 的 几 种 DTD。 具 体 

如 下 所 示 。 

(1) HTML 4.01 Strict DTD: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.0rg/TR/html4/strict.dtd"> 

(2) HTML 4.01 Transitional DTD: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.o0rg/TR/html4/loose.dtd"> 

(3) HIML 4.01 Frameset DID: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.0org/TR/html4/frameset.dtd"> 

(4) XHTML 1.0 Strict: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

(5) XHTML 1.0 Transitional: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


(6) XHTML 1.0 Frameset: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll1-frameset.dtd"> 

(7) XHTML 1.1: 


<!DOCTYPE htm1l PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www-w3-org/TR/xhtml111/DTD/xhtml111.dtd"> 


(8) XHTML 1.1 plus MathML plus SVG: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 

1.1//EN" "http://www.w3.org/2002/04/xhtm1-math-svg/xhtm1-math-svg.dtd"> 

在 上 述 声 明 设 置 中 ，Strict( 严 格 型 ) 版 本 只 允许 使 用 XHTML， 除 非 Web 开发 者 打算 只 
依赖 样式 表 而 不 使 用 任何 格式 的 标记 来 编写 XHTML 文档 ， 否 则 不 推荐 使 用 这 个 规范 。 
Transitional( 过 渡 型 ) 版 本 是 最 灵活 的 规范 ， 它 允许 用 户 使 用 不 被 推荐 但 仍然 可 用 的 元 素 和 
属性 。Frameset( 框 架 型 ) 版 本 与 Transitional 版 本 类 似 ， 但 是 它 支 持 需 要 使 用 框架 的 元 素 。 

在 HIML 文件 中 ， 所 有 的 控制 标记 必须 以 html 为 根 标记 ， 所 以 在 DTD 的 声明 中 
element-name 必须 是 “HTML ”或 “html”。 因 为 在 HTML 规范 中 ， 对 于 标记 中 的 英文 大 
小 写 是 不 区 分 的 ， 但 在 XHTML 文件 中 element-name 必须 是 “html”。 

当 软 件 (如 浏览 器 ) 解 析 HTML 文件 时 ， 如 果 需 要 这 些 DTD， 则 可 以 通过 DTD-url 指定 
的 网 址 去 下 载 这 些 DTD。 这 3 个 DTD 都 是 经 过 W3C 认证 的 ， 所 以 属于 公认 的 标准 。 由 
于 HTML 文件 不 允许 引用 其 他 自 定义 的 DTD， 所 以 DTD-type 的 设置 必须 是 PUBLIC。 


邮 提示 : 为 什么 我 们 在 绝 大 多 数 的 HTML 文件 中 都 没有 设置 DID 上 声明 呢 ? 这 是 因 
为 浏览 器 在 解读 HTML 文件 时 ， 都 是 使 用 浏览 器 本 身 指定 的 DTD， 所 以 就 不 再 去 下 载 
标准 的 DID 了 。 这 是 浏览 器 可 以 使 用 自己 扩展 控制 标记 的 原因 ， 也 是 HTML 文件 没有 
设置 DTD 的 声明 仍 可 以 被 浏览 的 原因 。 但 如 果 HTML 文件 要 被 其 他 软件 解读 的 话 ， 一 
定 要 加 上 DTD 的 声明 ， 否 则 该 软件 就 无 法 判断 该 HTML 文件 是 否 是 有 效 的 文件 。 


(23 标记 文档 开始 


文档 标记 以 <htm 户 标记 开始 ， 以 </htm 访 标记 结束 ， 用 于 表示 该 文档 是 以 超 文 本 标记 语 
言 (HTML) 编 写 的 。 

其 语法 格式 如 下 : 

<html> 文 档 的 全 部 内 容 </html> 

任何 一 个 规范 的 HTML 文档 最 先 出 现 的 HTML 标记 都 是 <html>， 而 且 它 必须 成 对 出 
现 。 开 始 标记 <html> 和 结束 标记 </html> 分 别 位 于 HTML 文档 的 最 开始 和 结束 ， 文 档 中 的 
所 有 HTML 标记 都 包含 在 <html> 标 记 中 。 

事实 上 ， 常 用 的 Web 浏览 器 (如 正 ) 都 可 以 自动 识别 HTML 文档 ， 并 不 要 求 有 <html> 
标记 ， 也 不 对 该 标记 进行 任何 操作 。 但 是 ， 为 了 提高 文档 的 适用 性 ， 使 编写 的 HTML 文档 
能 适应 不 断 变化 的 Web 浏览 器 ， 应 当 养 成 使 用 这 个 标记 的 习惯 。 
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(人 24 标记 文档 头 部 


HTML 文档 头 部 以 <head> 标 记 开 始 ， 以 </head> 标 记 结 束 。HTML 文档 头 部 用 于 定义 
文档 的 标题 (出 现在 Web 浏览 器 窗口 的 标题 栏 中 ) 和 一 些 属性 。 标 题 包 含 在 <title> 和 </title> 
标记 之 间 ， 其 语法 格式 如 下 : 

<head> 

<title> 文 档 标 题 </title> 

</head> 

在 <head> 标 记 所 定义 的 元 素 中 不 允许 放置 网 页 的 任何 内 容 ， 而 是 放置 关于 HTML 文档 
的 信息 。 也 就 是 说 ， 它 并 不 属于 HTML 文档 的 主体 ， 它 包含 文档 的 标题 、 编 码 方 式 及 
URL 等 信息 ， 这 些 信息 大 部 分 是 用 来 提供 索引 和 其 他 方面 的 应 用 的 。 

每 个 HTML 文档 都 需要 有 一 个 文档 名 称 。 在 浏览 器 中 ， 文 档 名 称 作为 窗口 名 称 显示 在 
该 窗口 的 最 上 方 ， 这 对 浏览 器 的 收藏 功能 很 有 帮助 。HTML 文档 的 标题 要 写 在 <title> 与 
<title> 标 记 之 间 ， 该 组 标记 应 包含 在 <head> 与 </head> 标 记 当 中 。 


十 HTML 文档 的 标记 是 可 以 党 套 的 ， 即 在 一 对 标记 中 可 以 谈 入 另 一 对 子 标 
记 。 谈 套 在 <head> 标 记 中 的 常用 标记 有 <title>、<meta> 和 <style>。 


2 标记 文档 主体 


HTML 文档 主体 部 分 以 <body> 标 记 开 始 ， 以 </body> 标 记 结 束 。HTML 文档 主体 用 于 
存放 页 面 中 要 显示 的 文本 、 图 像 和 链接 。 其 语法 格式 如 下 : 

<body> 主 体 部 分 </body> 

<body> 标 记 是 成 对 出 现 的 ， 网 页 中 的 主体 内 容 应 该 写 在 <body> 与 <body> 之 间 ， 而 
<body> 标 记 包 含 在 <html> 与 </html> 标 记 之 间 。 


(26 编写 注意 事项 


在 编写 HTML 文档 时 ， 要 注意 以 下 事项 。 

(1) 尖 括 号 “<” 和 “>” 是 任何 标记 的 开始 和 结束 ， 元 素 的 标记 要 用 这 对 尖 括 号 括 起 
来 ， 并 且 结 束 标记 在 形式 上 总 是 在 开始 标记 前 加 一 个 斜 杠 (/)。 

(2) 标记 之 间 可 以 嵌 套 ， 例 如 ; 


<body> 
<center> 
<div> 初 始 HTML 文档 </div> 
</center> 
</body> 


(3) HTML 元 素 是 不 区 分 大 小 写 的 。 例 如 ， 以 下 几 种 写法 都 是 正确 的 ， 并 且 表 示 相同 
的 标记 : 


Wy 一 


<HEAD> 
<Head> 
<head> 


(4) 任何 回 车 和 空格 在 HIML 代码 中 都 不 起 作用 。 为 了 代码 清晰 ， 建 议 不 同 的 标记 之 
间 在 回 车 换行 后 编写 。 

(5) HTML 标记 中 可 以 放置 各 种 属性 ， 如 下 面 的 代码 所 示 : 

<div align="center"> 唐 诗 300 首 </div> 


其 中 ，align 为 <div> 标 记 的 属性 ，center 为 align 属性 的 值 。 
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权 属性 应 该 出 现在 “<>” 内， 并 且 与 元 素 名 之 间 应 该 用 一 个 空格 分 开 ， 属 性 
值 应 该 使 用 引号 括 住 。 

(6) 如 果 和 需要 在 HTML 文档 代码 中 添加 注释 ， 可 以 用 “<!--” 开 始 ， 以 “-->” 结 束 。 
例如 下 面 的 代码 : 

<!-- 文档 范例 1-2 --> 

<!-- 文档 说 明 : 第 一 个 HTML 文档 --> 

<html> 

ee 

注释 语句 只 出 现在 HTML 文档 代码 中 ， 而 不 会 在 浏览 器 中 显示 出 来 。 
(1.2.7 实战 一 一 创建 第 一 个 HTML 文 档 


在 详细 了 解 HTML 文档 的 每 个 组 成 部 分 之 后 ， 本 小 节 将 创建 一 个 非常 简单 的 HTML 
文档 ， 演 示 HTML 文档 的 创建 方法 。 具 体 步 骤 如 下 。 

(1) 创建 一 个 名 为 welcom.html 的 文件 ， 用 记事 本 打开 ， 进 行 编辑 。 

(2) 在 第 一 行使 用 DOCTYPE 指令 添加 XHTML 1.0 的 声明 代码 ， 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


(3) 创建 一 个 标准 的 HTML 文档 结构 ， 即 <html> 标 记 中 包含 <head> 和 <body> 两 个 子 
标记 。 代 码 如 下 : 

<html> 

<head></head> 


<body></body> 
</html> 


(4) 向 <head> 标 记 内 添加 一 个 <meta> 标 记 ， 设 置 文档 的 编码 为 utf-8。 代 码 如 下 : 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
(5) 使 用 <title> 标 记 设 置 文档 的 标题 为 “我 的 第 一 个 HTML 页 面 ”。 代 码 如 下 : 


<title> 我 的 第 一 个 HTML 页 面 </title> 
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(6) 向 <body> 标 记 中 添加 页 面 需要 显示 的 主体 内 容 。 代 码 如 下 : 


<h1> 春 暖 花 开 </h1> 

<hr/> 

<p> 春 暧 花 开 ， 这 是 我 的 世界 </p> 

<p> 每 次 怒放 ， 都 是 心中 喷发 的 爱 </p> 

<hr/> 

<p align="right"> 更 多 内 容 请 看 这 里 <a href="#"> 春 暖 花 开 </a></p> 


上 述 代码 中 使 用 的 各 种 HTML 标记 将 在 后 面 介绍 。 
(7) 向 文档 中 添加 儿 个 注释 。 如 下 所 示 为 本 示例 的 最 终 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 我 的 第 一 个 HTML 页 面 </title> 

</head> 

<!-- 以 上 为 HTML 的 头 部 --> 

<body> 

<!-- 这 里 是 HTML 的 主体 --> 

<h1> 春 暧 花 开 </hl1> 

<hr/> 

<p> 春 暖 花 开 ， 这 是 我 的 世界 </p> 

<p> 每 次 怒放 ， 都 是 心中 喷发 的 爱 </p> 

<hr/> 

<p align="right"> 更 多 内 容 请 看 这 里 <a href="#"> 春 暖 花 开 </a></p> 

</body> 

</html> 

<!--HTML 文档 结束 --> 


(8) 用 Chrome 浏览 器 打开 welcome.html 文件 ， 查 看 示例 运行 的 效果 ， 如 图 1-1 所 
示 。 在 图 1-1 中 ， 并 没有 显示 注释 ， 可 以 右 击 ， 从 弹出 的 快捷 菜单 中 选择 “查看 源 代码 ” 
命令 查看 HTML 源 代码 ， 如 图 1-2 所 示 。 


也 2 入 一个 TIMLF 面 x 性 汪 D welcomehtml 
“CDfiel//D/ww 祝 因 咏 岁 国 三 -3 CC Dview-source:file:///D/wwwRoo 咏 四 忆 多 国 


春暖 花 开 3 es 


4 neta hitp-equiv="Content-Type” content="text/htnl; charset=utf-8" /》 
5 | <title> 我 的 第 一 个 HTIL 页面 /title> 
5| < 


因明 花 开 ， 这 是 我 的 七 界 了 | wna 的 头 部 一 > 


8 | <body> 
9 | <! 一 这 里 是 HTIQ 的 主体 一 > 
10 | <hl> 春 眶 花 开 </hl> 
11| he/> 
a 12 | <p> 春 眶 花 开 ， 这 是 我 的 世界 </py 
更 多 内 容 请 看 这 里 春 蛤 苍 开 13 py 每 次 她 放 ， 都 是 心中 哺 发 的 要 </py 
14| de/> 


全 <p aligr="right"> 更 多 内 容 请 看 这 里 <a href=“#"》 春 睡 花 开 《/a>/p> 
16| /body> 

17| whtal> 

和 8| <! 一 HT 了 0 文档 结束 一 


每 次 怒放 ， 都 是 心中 喇 发 的 爱 


1-1 示例 运行 的 效果 1-2 ”查看 源 代码 


1.3 文档 基础 标记 


从 文档 结构 中 可 以 看 出 ，HTML 页 面 是 由 很 多 标记 组 成 的 。 本 节 将 介绍 HTML 中 基础 
标记 的 使 用 ， 如 使 用 元 信息 标记 定义 页 面 关键 字 、 使 用 字体 标记 定义 字体 大 小 和 颜色 等 。 


( .3.15 元 信息 标记 


元 信息 使 用 的 是 <meta> 标 记 ， 它 必须 放 在 HTML 文档 的 <head> 和 </head> 标 记 内 。 
<meta> 标 记 不 需要 结束 标记 ， 在 标记 内 的 是 一 个 元 信息 内 容 。 

<meta> 标 记 常 用 的 属性 有 两 个 : name 和 http-equiv。 其 中 name 用 于 描述 网 页 ， 以 便 
于 搜索 引擎 查找 和 分 类 。 常 用 的 语法 如 下 : 


<meta name="keyname" content=" 具 体 的 关键 字 "” /> 
<meta http-equiv="name"” content=" 内 容 " /> 


用 户 可 以 使 用 meta 来 设置 不 同 的 内 容 ， 如 页 面 关 键 字 、 页 面 描 述 、 作 者 信息 ， 以 及 
页 面 的 定时 跳 转 等 。 

【 例 1.1】 

创建 一 个 示例 ， 分 别 使 用 <meta> 标 记 的 name 和 http-equiv 属性 指定 页 面 的 元 信息 。 

(1) 使 用 name 和 content 设置 页 面 关键 字 。 代 人 码 如 下 所 示 : 

<meta name="keyword" content=" 教 程 ,视频 教程 ,编程 视频 " /> 

keyword 表示 要 设置 的 是 页 面 关键 字 ， 具 体 关键 字 由 content 属性 来 指定 ， 多 个 关键 字 
之 间 使 用 逗号 分 隔 。 上 面 的 代码 设置 了 3 个 关键 字 ， 分 别 是 教程 、 视 频 教 程 和 编程 视频 。 

(2) 设置 页 面 描述 也 是 为 了 便于 搜索 引擎 的 查找 。 与 关键 字 一 样 ， 设 置 的 页 面 描 述 不 
会 在 网 页 中 显示 出 来 。 代 码 如 下 : 

<meta name="description" content=" 窗 内 网 用 户 注册 页 面 " /> 

(3) 通过 指定 name 和 content 的 值 ， 可 以 在 页 面 的 源 代码 中 显示 页 面 制 作者 的 姓名 以 
及 个 人 信息 。 代 码 如 下 : 

<meta name="author" content="itzcn.com" /> 

(4) 如 下 代码 限制 了 搜索 引擎 对 页 面 的 搜索 方式 : 

<meta name="robots" content="indexlalllnofollowlnoindexlnone" /> 

上 述 代码 给 出 了 content 属性 所 有 可 能 的 值 ， 其 中 index 表示 只 能 搜索 当前 页 ，all 表示 
能 搜索 当前 网 页 及 其 链接 的 网 页 ，nofollow 表示 不 能 搜索 当前 网 页 链接 的 网 页 ，noindex 表 
示 不 能 搜索 当前 网 页 ，none 则 表示 不 能 搜索 当前 网 页 及 其 链接 的 网 页 。 

(5) 使 用 meta 还 可 以 实现 自动 刷新 页 面 的 功能 。 如 下 代码 中 ， 页 面 5 秒 刷新 一 次 : 


<meta http-equiv="refresh" content="5" /> 


上 述 代码 中 refresh 表示 网 页 的 刷新 ，content 属性 的 内 容 指定 页 面 刷新 的 时 间 ， 默 认 
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情况 下 ， 刷 新 时 间 以 秒 为 单位 。 

(6) 将 http-equiv 属性 的 值 指定 为 expires， 表 示 设 置 网 页 的 到 期 时 间 ， 一 旦 过 期 ， 必 
须 到 服务 器 上 重新 调用 。 到 期 时 间 必 须 是 GMT 时 间 格 式 ， 即 “星期 ,日 月 年 时 分 
秒 ”， 它 们 都 使 用 英文 和 数字 指定 。 代 码 如 下 : 


<meta http-equiv="expires" content="Wed,14 september 2013 15:30:30 GMT" /> 


(7) 将 http-equiv 属性 的 值 指定 为 charset， 表 示 设 置 网 页 的 文档 编码 。 如 下 代码 设置 
编码 为 utf-8: 


<meta http-equiv="charset" content="utf-8" /> 


除了 utf-8 编码 之 外 ， 常 用 的 编码 还 有 gbk、gb2312 和 iso-8859-1。 


(32 字体 标记 


一 个 完整 的 HTML 网 页 少不了 文本 内 容 ( 即 字体 )，HTML 把 用 来 显示 和 处 理 的 标记 称 
为 字体 标记 ， 它 可 以 对 文字 样式 、 颜 色 和 字体 大 小 进行 设计 。HTML 中 与 字体 有 关 的 标记 


有 <hn>、<font>、<strong>、<em> 和 <small> 等 。 
1. <hn> 标 记 


<hn> 标 记 通常 也 会 被 称 为 标题 文字 标记 ， 每 一 种 标题 在 字号 上 都 有 明显 的 区 别 。n 的 
值 可 以 是 整数 1~6 中 的 任何 一 个 ， 从 1 级 到 6 级 逐渐 减 小 。 该 标记 的 使 用 非常 简单 ， 以 1 
级 标题 为 例 ， 语 法 如 下 : 

< 


【 例 1.2】 

在 新 建 的 项 目 中 添加 全 新 的 HTML 页 面 ， 在 该 页 面 中 依次 添加 hl 到 h6 的 标记 。 代 码 
如 下 : 

<h1> 推 荐 : HTML 5 系列 视频 教程 </h1> 

<h2> 网 页 设计 的 最 佳 工具 </h2> 

<h3>HTML 网 页 设计 经 典 案例 </h3> 

<h4> 快 速 建站 实用 指南 </h4> 

<h5> 如 何 使 用 搜索 引擎 </h5> 

<h6> 原 创 模板 下 载 </h6> 

运行 页 面 查看 效果 ， 如 图 1-3 所 示 。 

默认 情况 下 ，<hn> 标 记 的 标题 文字 是 靠 左 对 齐 的 。 而 在 实际 的 网 页 设计 页 面 中 ， 需 要 
将 标题 文字 放置 在 不 同 的 位 置 ， 最 常用 的 就 是 使 用 align 属性 。align 属性 的 值 有 3 个 : 
left、center 和 right。 
【 例 1.3】 
对 图 1-3 中 的 标题 指定 align 属性 来 更 改 显 示 位 置 。 代 码 如 下 : 
<hl align="center"> 推 荐 : HTML 5 系列 视频 教程 </h1> 


<h2 align="left"> 网 页 设计 的 最 佳 工具 </h2> 
<h3 align="right"> HTML 网 页 设计 经 典 案例 </h3> 


推荐 : HTML 5 系列 视频 教程 
网 页 设计 的 最 佳 工 具 
NTML 网 页 设计 径 典 案例 


1-3 ”<hn> 标 记 练习 


重新 运行 页 面 ， 具 体 效 果 不 再 给 出 ， 请 读者 思考 。 
2.，<font> 标 记 


<font> 标 记 是 HTML 网 页 中 最 常用 的 一 个 标记 ， 它 用 来 表示 文字 样式 ， 通 过 向 该 标记 
中 添加 属性 ， 可 以 实现 各 种 各 样 的 文字 效果 。<font> 标 记 的 语法 如 下 ; 

<font face=" 字 体 样式 ” size=" 字 体 大 小 " color=" 字 体 颜 色 "> 文 字 内 容 </font> 

在 上 述 语法 形式 中 ， 可 以 直接 使 用 <font> 而 不 添加 任何 属性 ， 也 可 以 添加 一 个 或 多 个 
属性 。 常 用 属性 的 说 明 如 下 。 

(1) face 属性 

face 属性 可 以 设置 文字 的 不 同 字体 效果 ， 例 如 ， 将 字体 设置 为 “黑体 ”、“ 隶 书 ”、 
“宋体 ”以 及 “华文 彩云 ”等 。face 属性 的 值 可 以 有 一 个 或 多 个 ， 多 个 属性 值 之 间 使 用 去 
号 分 隔 。 默 认 情 况 下 使 用 第 1 种 字体 进行 显示 。 如 果 第 1 种 字体 不 存在 ， 则 使 用 第 2 种 字 
体 进行 代替 ， 以 此 类 推 。 如 下 代码 展示 了 face 属性 : 

<font face=" 黑 体 ,宋体 , 新 宋体 "> 我 的 世界 </font> 


bE 用 户 设置 字体 的 效果 时 ， 必 须 确保 用 户 系 统 中 已 经 安装 了 相应 的 字体 ， 否 
则 这 些 字体 会 被 浏览 器 中 的 普通 字体 所 代替 。 因 此 ， 用 户 在 设计 网 页 时 应 当 尽量 不 使 用 
特殊 字体 ， 以 免 浏 览 页 面 时 无 法 看 到 正确 的 效果 。 


(2) size 属性 

size 属性 是 指 字体 的 大 小 ， 它 没有 一 个 相对 的 大 小 标准 ， 其 大 小 只 是 相对 于 默认 字体 
而 言 。size 属性 的 有 效 范围 值 是 整数 1~7， 其 中 3 是 默认 值 。 用 户 在 使 用 时 可 以 在 size 属 
性 前 添加 “+” 或 “-” 符 号 ， 以 指定 相对 于 默认 字体 大 小 的 增 量 或 减 量 。 

【 例 1.4】 

如 下 代码 展示 了 size 属性 设置 不 同 字 体 大 小 的 用 法 : 

<font face=" 黑 体 ,宋体 ,新 宋体 ”size="5"> 春 天 </font> 

<font face=" 黑 体 ,宋体 ,新 宋体 ” size="+7"> 夏 天 </font> 
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<font face=" 黑 体 ,宋体 ,新 宋体 ”size="-4"> 秋 天 </font> 

<font face=" 黑 体 ,宋体 ,新 宋体 ”size="2"> 冬 天 </font> 

(3) color 属性 

color 属性 用 于 设置 字体 的 颜色 ， 该 属性 的 值 可 以 是 关键 字 red、yellow、black、green 
和 blue 等 。 但 是 ， 大 多 数 情 况 下 color 属性 是 通过 十 六 进 制 的 颜色 代码 RGB) 表 示 的 。 如 
表 1-1 列 出 了 常用 字体 颜色 的 名 称 和 十 六 进 制 颜色 值 。 


表 1-1 常用 字体 颜色 名 称 和 十 六 进 制 颜色 值 


颜色 名 称 十 六 进 制 颜色 值 
black( 黑 色 ) ri #808000 
white( 自 色 ) #FF0000 
ellow( 黄 色 ) | WEFFF00 | maroonGEE) | #800000 
aqua( 青 色 ) #008080 
bine( 临 的 ) #000080 
gray( 灰 色 ) #COCOCO 


green( 绿 色 ) time( 浅 绿色 ) #00FFO0 


purple( 紫 色 ) fuchsia( 紫 红色 ) #FFOOFF 


【 例 1.5】 
如 下 代码 展示 了 color 属性 在 <font> 标 记 中 的 简单 使 用 : 


<font color="red"> 红 色 </font> 

<font color="blue"> 蓝 色 </font> 

<font color="#FFFFFF"> 白 色 </font> 

<font color="#00FFFF"> 青 色 </font> 

通常 情况 下 ， 不 会 将 某 个 标记 的 属性 单独 使 用 ， 而 是 将 这 些 标记 和 属性 结合 起 来 使 

用 ， 下 面 通过 一 个 简单 的 练习 进行 介绍 。 
【 例 1.6】 
重新 更 改 例 1.2 中 的 代码 ， 为 网 页 中 的 文字 设置 效果 。 代 码 如 下 : 
<font size="3" color="red" face=" 黑 体 ">HTML 网 页 设计 经 典 案例 </font> 
<br/> 


<font size="+3" color="#000000" face=" 黑 体 ，Courier New"> 推 荐 : HTML 5 系列 
视频 教程 </font> 

<br/> 

<font size="+1" color="#000080" face=" 新 宋体 "> 网 页 设计 的 最 佳 工具 </font> 
<br/> 

<font size="-2" color="#FF00FF" face=" 宋 体 "> 快速 建站 实用 指南 </font> 

<br/> 

<font size="5" color="#808080" face="Times New Roman"> 如 何 使 用 搜索 引擎 
</font> 

<br/> 


<font size="4" color="#00FFFF" face=" 楷 体 "> 原创 模板 下 载 </font> 


新 运行 页 面 来 查看 效果 ， 如 图 1-4 所 示 。 
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3， 其 他 标记 


二 > 入 窟 TANLH 志 半 雹 


<font> 标 记 的 face、size 和 color 属性 虽然 可 以 完成 对 字体 的 绚丽 设计 ， 但 是 ， 有 些 情 
况 下 ， 这 些 设 计 并 不 能 满足 用 户 的 需求 ， 这 时 可 以 借助 其 他 的 一 些 标记 。 这 些 标记 能 够 让 
文字 有 更 多 的 样式 变化 ， 也 可 以 强调 某 一 部 分 ， 如 表 1-2 所 示 对 常用 的 HTML 其 他 字体 标 


记 进行 了 说 明 。 
表 1-2 HTML 中 的 其 他 常用 字体 标记 
字体 标记 a 
<b></b> 粗 体 
<i></i> 斜体 
<u></u> 下 划 线 
<tt></tt> 打字 机 字体 
<big></big> 大 型 字体 
<small></small> 小 型 字体 
<em></em> 表示 强调 ， 一 般 为 斜体 
<strone></strone> 表示 特别 强调 ， 一 般 为 粗 体 
【 例 1.7】 


如 下 代码 展示 了 这 些 常用 标记 的 简单 使 用 ， 开 发 人 员 向 页 面 添加 代码 ， 完 成 后 可 以 运 


行 页 面 查看 效果 。 代 码 如 下 : 


<b> 常 见 的 体育 运动 </b> 

<i> 作 者 : 张 艾 </i> 

<u> 通 过 u 标记 添加 下 划 线 </u> 

<big>big 标记 显示 大 型 字体 </big> 
<small>small 标记 表示 小 型 字体 </ small> 
<em>em 标记 显示 Welcome</em> 
<strong> 粗 体 </strong> 
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(33 超 链接 标记 


超 链接 (Hyperlink) 是 超级 链接 的 简称 ， 它 是 网 页 中 最 重要 的 元 素 之 一 。 可 以 按照 使 用 
对 象 的 不 同 ， 将 网 页 中 的 链接 进行 分 类 ， 如 文本 超 链 接 、 图 像 超 链接 、E-mail 链接 、 锚 点 
链接 、 多 媒体 文件 链接 和 空 链接 等 。 

链接 是 从 一 个 Web 页 到 另 一 个 相关 Web 页 的 有 效 途 径 ， 在 HTML 文档 中 通过 <a> 标 
记 来 实现 超 链 接 。 当 浏览 网 页 时 ， 单 击 一 个 超 链 接 ， 可 使 网 页 切换 到 另 一 个 HTML 文档 或 
URL 指定 的 站 点 。<a> 标 记 的 一 般 格 式 如 下 : 

<a href=" 链 接地 址 "> 超 链接 说 明文 字 </a> 


上 述 语法 格式 中 ，href 属性 所 指向 的 链接 地 址 可 以 是 本 地 计算 机 上 的 一 个 文件 ， 也 可 
以 是 某 个 站 点 或 网 页 中 的 URL， 还 可 以 是 本 网 页 中 的 一 个 书签 ， “ 超 链 接 说 明文 字 ” 是 网 
页 中 链接 上 显示 的 文字 。 

<a> 标 记 中 的 链接 地 址 可 以 采用 绝对 路 径 和 相对 路 径 两 种 引用 ， 绝 对 路 径 是 主页 上 的 
文件 或 目录 硬盘 上 的 真正 路 径 (例如 F:MyWork\NewHtml.htm); 相对 路 径 适 合 于 网 站 的 内 
部 链接 (例如 InnerHtml_2.htm)。 下 面 给 出 相对 链接 常用 的 3 种 方式 : 

@ 如 果 链 接 到 同一 个 目录 下 ， 只 需 输入 要 链接 的 文档 的 名 称 ， 如 name.htm 或 

name.html。 

@ 如果 链接 到 下 一 级 目录 中 的 文件 ， 只 需 先 输入 目录 名 ， 然 后 再 加 “/” 和 文件 名 ， 

如 /work/name.htm 或 /work/name.html。 
@ ”如 果 要 链接 到 上 一 级 目录 中 的 文件 ， 则 先 输入 “../”， 然 后 输入 目录 名 和 文件 
名 ， 例 如 ../work/name.htm 或 . /work/mname .html。 

【 例 1.8】 

创建 一 个 示例 ， 为 <a> 标 记 中 的 href 属性 指定 不 同 的 值 ， 并 单 击 网 页 中 的 链接 信息 进 
行 测试 ， 步 又 如 下 。 

在 网 页 的 合适 位 置 添加 <p> 标 记 ， 在 该 标记 中 棋 套 <i> 标 记 和 <a> 标 记 ， 将 
<a> 标 记 的 href 的 值 指定 为 窗 内 网 的 网 址 www.itzcn.com， 代 码 如 下 : 

<p> 链 接 到 窗 内 网 站 点 :<i><a href="http://www.itzcn.com"> 进 入 窗 内 网 </a></i></p> 
国 轨 02| 继续 添加 <a> 标 记 ， 为 href 属性 的 值 使 用 相对 路 径 链接 到 当前 项 目 根 目 录 下 

的 index.html 页 面 。 代 码 如 下 : 

<p> 链 接 到 首页 : <i><a href="/index.html"> 站 点 首页 </a></i></p> 
国 嫌 03| 添加 <a> 标 记 ， 链 接 到 一 个 电子 邮箱 。 代 码 如 下 : 

<p> 链 接 到 电子 邮箱 : <i><a href="mailto:798804212@qq.com; "> 写 信 给 我 </a></i></p> 
国 国 94 添加 <a> 标 记 ， 设置 href 属性 的 值 ， 链 接 到 本 地 路 径 。 如 下 所 示 : 

<p> 链 接 到 本 地 的 帮助 文档 页 面 ，<i><a href="E:\MyName\help.html"> 查 看 帮助 </a></i></p> 


国 轨 05| 运行 页 面 查看 效果 ， 如 图 1-5 所 示 。 可 以 单 击 测试 链接 功能 。 
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链接 到 窗 内 网 站 点 :这 勾 营 由 厅 
链接 到 首页 ， 走 点 育 页 
链接 到 电子 邮箱 ， 号 售 参 我 

链接 到 本 地 的 帮助 文档 页 面 ， 莹 等 壳 助 


二 > 入 党 1NLH 协 1 波 辐 
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默认 情况 下 ， 用 户 单 击 页 面 中 的 超 链接 时 ， 会 覆盖 当前 的 页 面 。 有 时 候 ， 用 户 并 不 希 
望 新 打开 的 网 页 窗口 ( 即 目 标 窗口 ) 将 原来 的 窗口 禾 盖 ， 这 时 可 以 通过 设置 target 属性 来 设 
置 目标 窗口 的 显示 位 置 。 

扩展 <a> 标 记 的 语法 如 下 所 示 : 

<a href=" 链 接地 址 ”target=" parent | _blank | _self | _top"> 超 链接 说 明文 字 </a> 

从 上 述 语法 内 容 中 可 以 看 到 ，target 属性 的 常用 值 有 4 个 : _parent、_blank、_self 和 
_top。 表 1-3 对 这 4 个 值 进行 了 说 明 。 


表 1-3 target 属性 的 常用 属性 值 


target 属性 值 说 明 
_parent 在 上 一 级 窗口 中 打开 ， 常 在 分 帧 框架 页 面 中 使 用 
blank 浏览 器 总 在 一 个 新 打开 、 未 命名 的 窗口 中 载 入 目标 文档 
self 默认 设置 ， 在 同一 个 窗口 中 打开 目标 文档 
_top 在 浏览 器 的 整个 窗口 中 打开 ， 将 会 忽略 所 有 的 框架 结构 


上 地 提示 : target 属性 的 4 个 值 都 是 以 下 划 线 开始 ， 任 何其 他 用 一 个 下 划 线 作为 开头 
的 窗口 或 者 目标 都 会 被 浏览 器 所 忽略 。 因此， 不 要 将 下 划 线 作为 文档 中 定义 的 任何 框架 
name 或 id 的 第 一 个 字条 。 


【 例 1.9】 

我 们 重新 更 改 例 1.8 中 的 代码 ， 为 每 个 超 链 接 标记 添加 target 属性 ， 并 指定 target 属性 
的 值 。 

以 第 一 个 标记 为 例 ， 代 码 如 下 : 

<p> 链 接 到 窗 内 网 站 点 : <i><a href="http://www.itzcn.com" target=" blank"> 进 入 

窗 内 网 </a></i></p> 


重新 运行 页 面 ， 单 击 链接 内 容 进行 测试 ， 打 开 的 窗口 网 页 效果 如 图 1-6 所 示 。 
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人 拒 智 旗下 网 站 
iL 志 Cnass 
链接 到 窗 内 网 站 点 : Bx slsh 
链接 到 首页 ， 茧 点 党 页 讲师 风采 图 书 推荐 
链接 到 电子 邮箱 ， 号 经 参 我 
链接 到 本 地 的 帮助 文档 页 面 ， 莹 每 索 纺 


友情 链接 。 百度 谷歌 新 证 汉 易 摧 乌 计算 机 雾 香 由 
it 
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(34 水 平 线 标记 


水 平 线 用 于 段落 和 段落 之 间 的 分 隔 ， 它 使 文档 结构 更 加 清晰 明了 ， 文 字 的 编排 更 加 整 
齐 。HTML 中 ， 水 平 线 标记 是 <hr>， 它 是 独立 使 用 的 标记 符 ( 即 没有 结束 标记 符 )， 用 来 绘 
制 一 条 自动 换行 的 水 平 直线 ， 直 线 的 上 下 两 端 都 会 有 一 定 的 空白 。 
<hr> 标 记 也 有 许多 自身 属性 ， 常 用 属性 说 明 如 下 。 
e@ width: 该 属性 用 于 设置 水 平 线 的 长 度 ， 它 的 取 值 可 以 是 具体 的 数值 (单位 是 像 
素 )， 也 可 以 是 百分比 数值 。 当 使 用 后 者 时 ， 表 示 占 浏览 器 窗口 的 百分比 。 

@ height 用 于 设置 水 平 线 的 高 度 ， 它 的 取 值 可 以 是 具体 的 数值 (单位 是 像素 )， 也 可 
以 是 百分比 数值 。 

e@ ”size: 该 属性 用 于 设置 水 平 线 的 粗细 ， 单 位 为 像素 。 

e@ ”align: 用 于 设置 水 平 线 的 对 齐 方 式 。 其 属性 值 可 以 使 用 left( 左 对 齐 )、right( 右 对 
齐 ) 和 center( 居 中 ， 默 认 值 ) 中 的 任意 一 个 。 

@ color: 设置 水 平 线 的 颜色 。 

【 例 1.10】 

创建 一 个 HTML 页 面 ， 使 用 <hr> 标 记 为 页 面 添 加 3 条 水 平 线 。 步 又 如 下 。 

力 E01] 第 一 条 直接 使 用 <hr> 标 记 ， 不 使 用 任何 其 他 属性 。 代 码 如 下 ; 

<hr/> 
国 妇 02| 在 页 面 中 使 用 <hr> 标 记 绘 制 一 个 宽度 是 220、 粗 细 是 3、 颜 色 值 是 FFCC00 
的 水 平 线 ， 并 且 将 该 水 平 线 居 中 。 代 码 如 下 : 
<hr width="220px" align="center" size="3" color="#FFCC00" /> 
使 用 <hr> 标 记 绘制 一 个 粗细 是 2、 颜 色 值 是 33FFFF 的 水 平 线 。 代 码 如 下 : 
Size="2" color="#33FFFF" /> 


运行 HTML 页 面 ， 查 看 上 面 绘制 的 三 条 水 平 线 的 效果 ， 如 图 1-7 所 示 。 
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学 要 上 壬 色 
可 上 美 名 ， 只 是 国 为 委 上 汕 科 抽 凶 重 的 万 各 情 ~ 


花心 与 纯情 ， 一 点 也 不 地 后 ， Et 鸡 尾 沽 号 色 、 香 、 昧 
外 观 清 遂 、 口 感 香 测 、 味 首 清 来 才 是 它 的 真正 情 
息 所 的 而 十 乐 相 任 下， 每 一 吉 鸡 是 酒 部 由 是 丙种 以 上 的 


询 。 在 1 
多利 晶 名- 鸡尾酒 的 词 制 过 程 就 像 做 不 发 生 危 险 反应 的 
化 学 实验 ， 或 是 计算 排列 组 合 的 一 种 有 趣 的 游戏 - 


和 加 


自 最 要 化 引 a 


1-7 ”使 用 水 平 线 标记 


(ez 段落 标记 


网 页 中 的 文字 结合 起 来 ， 就 形成 了 一 个 段落 ，HTML 中 与 段落 有 关 的 标记 有 多 个 ， 如 
换行 标记 、 段 落 标记 、 居 中 对 齐 标记 和 缩 进 标记 等 。 下 面 详细 介绍 每 个 段落 标记 的 具体 使 
用 方法 。 

1， 换 行 标记 

<br> 表 示 一 个 回 车 符 ， 浏 览 器 遇 到 该 标记 时 会 产生 一 个 换行 ， 该 标记 没有 对 应 的 结束 
标记 。 使 用 <br> 标 记 实 现 的 文本 效果 能 够 使 用 文本 以 比较 紧凑 的 形式 显示 。 一 个 <br> 标 记 
代表 一 个 换行 ， 连 续 的 多 个 标记 可 以 多 次 换行 。 

<br> 和 <br 人 都 可 以 达到 换行 的 效果 。 简 单 的 使 用 示例 见 下 面 的 代码 : 


一 年 有 4 个 季节 。<Br><br> 
一 年 有 12 个 月 。<br /> 一 年 有 365 天 ， 每 天 24 小 时 。 


2. 段落 标记 


<p> 表 示 段 落 标记 ， 在 <p></p> 之 间 的 内 容 属于 同一 个 文本 段落 。 我 们 可 以 使 用 成 对 的 
<p> 标 记 来 包含 段落 ， 也 可 以 单独 使 用 <p> 标 记 来 划分 段落 。 在 <p> 标 记 中 可 以 使 用 align 属 
性 说 明 该 段落 文本 的 对 齐 方式 ， 它 的 值 可 以 是 left( 左 对 齐 )、right( 右 对 齐 ) 或 者 center( 居 中 
对 齐 )。 

【 例 1.11]】 

用 <p> 标 记 将 页 面 分 为 两 个 段落 ， 在 段落 中 使 用 <br> 标 记 进 行 换行 处 理 。 代 码 如 下 : 

<p>gnbsp; gnbsp; gnbsp; gnbsp; 爱 上 美 色 ， 只 是 因为 爱 上 奢 种 纯净 里 的 万 种 风情 。<br /> 

&nbsp; gnbsp; gnbsp; gnbsp; 每 个 不 同性 格 、 爱 好 的 人 都 会 找到 自己 的 最 爱 。 而 打动 他 们 的 可 能 

只 是 每 个 鸡尾酒 背后 的 美丽 传说 和 魅力 特征 。 有 人 列 了 一 份 清单 : </p> 

<p>&nbsp;gnbsp;i&nbsp;&gnbsp; 相 爱 的 恋人 ， 一 份 “ 激 情 海 浴 ” 与 “巧克力 马 天 尼 ” 酒 能 使 浓 

情 蜜 意 流露 无 遗 。<br /> <br /> 

&nbsp; gnbsp; gnbsp; gnbsp; 单身 的 男人 ， 一 份 “ 黑 色 伏 特 加 ” 尽 现成 熟 稳健 的 气息 。<br /> 


br /> 


&nbsp; gnbsp; &nbsp; gnbsp; 年 轻 女孩 在 人 群 中 穿梭 ， 捧 一 杯 “ 蓝 色 夏威夷 ”， 杯 中 闪 动 的 炮 目 
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剔透 的 海蓝 色 ， 在 黑夜 泻 染 着 天 蓝 的 清 朗 ， 在 所 有 人 心中 留 下 美丽 的 痕迹 。<br /> <br /> 

&nbsp; gnbsp; &nbsp; gnbsp; 粉红 色 的 “ 玛 格 丽 特 ” 散 放 冰冻 草 莹 香 ， 有 着 调 酒 师 纪念 女友 的 动 

人 传说 。</p> 

上 述 代码 中 ，&nbsp; 表 示 添 加 一 个 空白 空格 ， 所 有 内 容 添加 完成 后 ， 运 行 网 页 ， 效 果 
如 图 1-8 所 示 。 
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是 每 个 鸡 必 洛 冯 后 的 美国 说 彼 力 特 证 有 人 列 了 一 份 清 
| 恋人， 一 份 “ 匠 情 海 溢 ” 与 “巧克力 马 天 尼 ” 酒 能 使 染 
全 无 省 ， 
单身 的 男人 ， 一 份 “黑色 伏特 加 ” 尽 现成 笋 稳健 的 气息 。 
孩 在 人 群 中 穿梭 ， 挤 一 杯 “ 蔓 色 页 威 现 ”， 杯 中 内 动 的 
FE 蔷 色 ， 在 黑夜 这 闲 荐 天 蔓 的 铺 关 ， 在 所 有 人 心中 留 下 


本 红色 的 “至 格 丽 特 ” 艇 放 冰 访 草 划 在 ， 有 着 调 面 是 纪 礼 女友 
的 动人 传说 - 


1-8 使 用 段落 标记 


3. 居中 对 齐 标记 


通过 <p> 标 记 的 align 属性 ， 可 以 将 段落 中 的 内 容 居 中 。 此 外 ，HTML 中 还 提供 了 专门 
的 对 齐 标记 <center>。 该 标记 的 使 用 非常 简单 ， 代 码 如 下 : 


<center> 文 字 内 容 </center> 


【 例 1.12】 
修改 例 1.11 中 的 代码 ， 在 <p> 标 记 的 两 端 添加 <center> 标 记 ， 如 下 所 示 : 
<center> 
<!-- 省 略 内 容 --> 
</center> 


<center> 标 记 会 自动 将 文字 居中 显示 ， 运 行 效果 如 图 1-9 所 示 。 
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i ee 有 人 列 了 一 份 请 


人， “ 洛 情 海 注 ” 与 
相 朋 的 恋人 ,一 份 ea 


单身 的 男人 ， 一 份 “黑色 伏特 加 ” 尽 现 成 热 稳健 的 气息 。 


孩 在 人 群 中 语 校 ， 掉 一 杯 “ 忒 ”， 杆 中 内 动 的 
始 昌 | 包 ， 在 时 1 a ， 在 所 有 人 心中 十 下 
美 画 3 


本 红色 的 “到 格 画 特 ” 艇 放 亲 访 草 获 香 ， 有 着 当知 师 纪念 女友 
的 动人 传说 


1-9 段落 内 容 居中 


4 缩 进 标记 

使 用 <blockquote> 标 记 可 以 实现 页 面 文字 的 段落 缩 进 。 每 使 用 该 标记 一 次 ， 段 落 就 会 
被 缩 进 一 次 ， 可 以 嵌 套 使 用 该 标记 ， 以 达到 不 同 的 缩 进 效果 。 

<blockquote> 标 记 的 语法 如 下 : 

<blockquote> 段 落 文字 </blockquote> 


【 例 1.13】 
在 HIML 页 面 中 添加 3 个 <blockquote> 标 记 ， 并 在 该 标记 中 使 用 <p> 标 记 定义 缩 进 段 
落 的 内 容 ， 代 码 如 下 : 


<blockquote> 
<blockquote> 
<p> 爱 上 美 色 ， 只 是 因为 爱 上 那 种 纯净 里 的 万 种 风情 。<br /> 
<blockquote> 每 个 不 同性 格 、 爱 好 的 人 都 会 找到 自己 的 最 爱 。 而 打动 他 们 的 可 能 只 是 每 个 
鸡尾酒 背后 的 美丽 传说 和 魅力 特征 。 有 人 列 了 一 份 清单 : </blockquote> 
</p> 
<p> 相 爱 的 恋人 ， 一 份 “ 激 情 海滩 ”与 “巧克力 马 天 尼 ” 酒 能 使 浓 情 蜜 意 流露 无 遗 。</p> 
</blockquote> 
<p> 单 身 的 男人 ， 一 份 “ 黑 色 伏 特 加 ” 尽 现成 熟 稳健 的 气息 。<br /> <b 
年 轻 女孩 在 人 群 中 穿梭 ， 捧 一 杯 “ 蓝 色 夏 威 克 ”， RT 在 黑夜 泻 染 
着 天 蓝 的 清 朗 ， 在 所 有 人 心中 留 下 美丽 的 痕迹 。<br /> <br / 
粉红 色 的 “ 玛 格 丽 特 ” 散 放 冰 冻 草 莓 香 ， 有 并 询 酒 师 区 从 女友 的 动人 传说 。 </p> 
</blockquote> 


运行 上 述 代码 查看 效果 ， 如 图 1-10 所 示 。 
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1.4 列表 标记 


HTML 支持 3 种 类 型 的 列表 标记 ， 分 别 是 编号 列表 、 项 目 符号 列表 和 说 明 项 目 列表 标 
记 。 下 面 通过 不 同 的 示例 来 介绍 这 些 列表 的 用 法 。 


1.4.1 编号 列表 
编号 列表 使 用 <ol> 标 记 ， 每 一 个 列表 项 前 使 用 <i>， 每 个 项 目 都 有 前 后 顺序 之 分 。 编 


条 
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号 列表 标记 的 语法 如 下 : 
<ol> 
<1i> 列 表 项 1</1i> 
<1i> 列 表 项 2</1i> 
<1i> 列 表 项 3</1i> 


</ol1> 


<ol> 标 记 还 具有 type 属性 和 start 属性 。 其 中 ，type 属性 用 于 设置 编号 的 种 类 ;start 为 
编号 的 开始 序号 。type 属性 的 取 值 及 含义 如 下 。 
@ ”1: 表示 序号 为 数字 。 
A: 表示 序号 为 大 写 英文 字母 。 
a: 表示 序号 为 小 写 英 文字 母 。 
I: 表示 序号 为 大 写 罗 马 数字 。 
i 表示 序号 为 小 写 罗马 数字 。 
【 例 1.14】 
下 面 使 用 <ol> 标 记 创 建 一 个 网 站 导航 列表 ， 代 码 如 下 : 
xo > 
<1i><a href="#"> 和 你 在 一 起 </a></1i> 
<1i><a href="#"> 白 色 百 合 花 </a></1i> 
<1i><a href="#"> 似 水 年 华 </a></1i> 
<1i><a "> 花蕊 </a></1i> 
<1i><a href="#"> 美 酒 文学 社 </a></1i> 
<1i><a href="#"> 水 木 清华 论坛 </a></1i> 
</ol1> 
<ol> 标 记 默 认 会 对 所 有 列表 项 使 用 数字 编号 ， 运 行 效果 如 图 1-11 所 示 。 现 在 为 <ol> 
标记 添加 “type=“A”start=“2”” 代 码 ， 使 用 字母 并 且 从 第 2 项 开始 编号 ， 再 次 运行 ， 效 果 
如 图 1-12 所 示 。 
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图 1-11 使 用 数字 编号 的 效果 图 1-12 使 用 字母 编号 的 效果 
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全 
(1.4.2 项 目 符号 列表 可 
二 
项 目 符号 列表 使 用 <ul> 标 记 ， 其 中 每 一 个 项 目 都 使 用 <li> 标 记 。 项 目 符号 标记 的 语法 = 
如 下 : 快 
速 
<ul> 人 
<1i> 项 目 符号 </1i> 门 

<1i> 项 目 符号 </1i> 

<1i> 项 目 符号 </1i> 

</ul> | 


项 目 符号 列表 <ul> 标 记 仅 有 一 个 type 属性 ，type 属性 可 取 的 值 为 circle( 空 心 圆 点 )、 
disc( 实 心 圆 点 ) 和 square( 实 心 正 方形 )。 
【 例 1.15】 
下 面 使 用 <ul> 标 记 创 建 一 个 网 站 导航 列表 ， 并 将 type 属性 设置 为 circle， 代 码 如 下 : 
<ul type="circle" > 
<1i><a href="#"> 和 你 在 一 起 </a></1i> 
<1i><a "> 白色 百合 花 </a></1i> 
<1i><a href="#"> 似 水 年 华 </a></1i> 
<1i><a href="#"> 花 蕊 </a></1i> 
<1i><a href="#"> 美 酒 文学 社 </a></1i> 
<1i><a href="#"> 水 木 清 华 论坛 </a></1i> 
</ul> 


运行 后 会 看 到 一 个 使 用 空心 圆 点 的 列表 ， 如 图 1-13 所 示 。 如 果 将 type 设置 为 disc， 则 
运行 效果 如 图 1-14 所 示 。 
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图 1-13 使 用 空心 圆 点 的 效果 图 1-14 使 用 实心 圆 点 的 效果 


(4.3 说 明 项 目 列表 
说 明 项 目 列表 可 以 用 来 给 每 一 个 列表 项 再 加 上 一 段 说 明 性 文字 ， 说 明 性 文字 独立 于 列 
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表 项 另 起 一 行 显示 。 在 应 用 中 ， 列 表 项 使 用 <d 必 标记 表示 ， 说 明 性 文字 使 用 <dd> 标 记 表 示 。 
定义 性 列表 的 语法 结构 为 : 
<dl> 
<dt> 第 一 项 </dt> 
<dd> 叙 述 第 一 项 的 定义 </dd> 
<qdt> 第 二 项 </dt> 
<dd> 叙 述 第 二 项 的 定义 </dd> 


</dl> 


【 例 1.16】 
演示 说 明 性 项 目 列表 的 使 用 : 


<h2> 香 水 品牌 </h2> 
<dl> 
<dt>Bijan</dt> 
<dd> 毕 扬 (Bijan) 由 名 牌 服装 设计 师 毕 扬 调制 ， 最 昂贵 的 香水 ， 有 浓郁 而 神秘 的 东方 香味 。 </dd> 
<dt>Chanel No.5</dt> 
<dd> 香 奈 尔 5 号 香水 ， 其 开 瓶 香味 为 花香 乙 醛 调 ， 持 续 香味 为 木 香 调 ，5 号 香水 的 花香 精致 地 注 
释 了 女性 独特 的 妩媚 与 婉约 。 </dd> 
</dl> 


执行 效果 如 图 1-15 所 示 。 
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香 杂 个 5 号 理 水， 其 开 矣 香 斩 为 花香 乙 梧 调 ， 的 续 香 味 为 厅 香 
调 ，N. 5 的 伦理 ， 精 下 地 注释 了 女性 独特 的 钛 如 与 锅 约 。 
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1.5 表格 标记 


美工 或 开发 人 员 在 设计 网 页 的 时 候 ， 为 了 使 页 面 更 加 美观 ， 通 常会 使 用 到 表格 。 表 格 
是 HIML 中 一 项 非常 重要 的 功能 ， 利 用 其 多 种 属性 能 够 设计 出 多 样 化 的 表格 ， 可 以 说 ， 表 
格 是 网 页 排版 的 灵魂 。 下 面 详细 介绍 表格 的 结构 、 表 格 标记 、 表 格 属 性 及 其 应 用 。 


(1 表格 的 结构 


表格 主要 由 行 和 列 (也 叫 单元 格 ) 组 成 。 其 中 表格 由 <table> 标 记 表 示 ， 行 由 <t> 标 记 表 
”” 示 ， 列 由 <td> 标 记 表 示 ， 行 和 列 都 需要 放 在 <table> 和 </table> 之 间 。 另 外 ， 还 可 以 通过 


<caption> 标 记 定义 表格 的 标题 ，<th> 标 记 表 示 表 格 的 表 头 。 创 建 表格 的 基本 语法 结构 如 下 : 


<table> 
<caption> 表格 标题 </caption> 
EE 
<th> 表 头 名 称 </th>- . - 
KE 
<tr> 
<tqd> 文 字 内 容 </td><td> 文 字 内 容 </td>. .. 
</Er> 
</table> 


上 述 基 本 结构 中 ， 表 格 的 表示 以 行为 单位 ， 在 行 中 包含 列 。 其 中 一 个 <tr></tr> 表 示 一 
行 ; 一 个 <td></td> 标 记 表 示 一 列 ; <th></th> 定 义 表 头 ， 一 般 可 以 不 用 。 

【 例 1.17】 

创建 一 个 3 行 3 列 的 表格 ， 要 求 定义 表格 标题 ， 并 将 第 一 行 设置 为 表 头 。 所 设计 的 表 
格 的 最 终 代 码 如 下 : 


<h2> 香 水 品牌 </h2> 
<table border="1"> 
<caption> 著 名 香水 品牌 </caption> 
< 三 
<th> 英 文 名 称 </th> <th> 中 文 名 称 </th> <th> 备 注 </th> 
</tr> 
< 丰产 
<td>Chanel No.5</td> <td> 香 奈 尔 5 号 香水 </td> <td> 香 奈 尔 </td> 
交 WEF> 
< 
<td>LANCOME so magic</td> <td> 兰 葡 奇 迹 香水 </td> <td>LANCOME 兰 东 </td> 
</EL> 
</table> 


表格 的 运行 效果 如 图 1-16 所 示 。 
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1-16 ”表格 的 运行 效果 


1.5.2 ”表格 的 属性 


上 节 的 示例 中 ， 为 了 更 加 清楚 地 显示 表格 的 结构 ， 为 表格 设置 了 border 属性 。border ER 
属性 用 于 设置 表格 边框 的 宽度 。 除 了 border 属性 外 ， 表 格 还 具有 许多 其 他 属性 。 SC 
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1. 表格 外 边框 的 控制 属性 
表格 的 外 边框 控制 属性 共有 border、cellspacing 和 cellpadding 这 3 个 ， 属 性 的 作用 说 
明 如 表 1-4 所 示 。 


表 1-4 表格 外 边框 的 控制 属性 


控制 表格 边框 的 宽度 。 属 性 值 为 一 整数 ， 单 位 为 像素 
控制 单元 格 边框 到 表格 边框 的 距离 ， 单 位 为 像素 
控制 单元 格 内 文字 到 单元 格 边框 的 距离 ， 单 位 为 像素 


border 
cellspacing 


cellpaddin: 


【 例 1.18】 
在 例 1.17 的 基础 上 为 表格 添加 border、cellpadding、cellspacing 属性 ， 控 制 表格 边 
框 、 单 元 格 及 文本 字 到 单元 格 之 间 的 大 小 。 最 终 代 码 如 下 : 


<table border="5" cellspacing="15" cellpadding="20"> 
<caption> 著 名 香水 品牌 </caption> 
<tr> 
<th> 英 文 名 称 </th> 
<th> 中 文 名 称 </th> 
<th> 备 注 </th> 
</tr> 
<tr> 
<td>Chanel No.5</td> <td> 香 奈 尔 5 号 香水 </td> <td> 香 奈 尔 </td> 
</tr> 
< 
<td>LANCOME so magic</td> <td> 兰 将 奇迹 香水 </td> <td> 兰 藻 </td> 
</tr> 
</table> 


执行 结果 如 图 1-17 所 示 。 
2. 表格 的 属性 


一 般 情况 下 ， 表 格 的 总 长 度 和 总 宽度 是 根据 各 行 和 各 列 的 内 容 的 总 和 自动 调整 的 。 如 
果 想 要 直接 固定 表格 的 大 小 ， 可 以 使 用 表格 的 width 和 height 属性 。width 和 height 属性 分 
别 用 于 控制 表格 的 宽度 和 高 度 。 除 此 之 外 ， 还 可 以 控制 表格 的 背景 色 和 水 平 对 齐 方式 。 这 
几 个 属性 的 说 明 如 表 1-5 所 示 。 


表 1-5 表格 的 属性 
width 控制 表格 的 宽度 。 如 果 其 取 值 为 一 整数 ， 则 单位 为 像素 。 若 设置 值 为 929%9， 则 表示 表格 
的 宽度 为 整个 网 页 宽度 的 百 分 之 n 
height 控制 表格 的 高 度 。 取 值 与 width 相同 


设置 表格 的 背景 颜色 


用 于 控制 整个 表格 在 网 页 水 平面 方向 的 对 齐 方式 (left、right、center) 


CD 


【 例 1.19】 
把 例 1.18 中 的 表格 宽度 设置 为 百分之百 ， 背 景 颜色 设置 为 #cCCCCC， 即 添加 
width=“100%”bgcolor=“#CCCCCC” 代 码 。 运 行 后 的 效果 如 图 1-18 所 示 。 


> 尖 营 1WLH 十 1 洪 忆 


| 


中 文 名 称 


香 条 尔 5 号 香水 


兰 更 厅 这 香水 


图 1-17 设置 间隔 图 1-18 设置 宽度 和 背景 色 


3. 行 和 列 的 属性 


表格 行 的 属性 可 以 控制 本 行 的 高 度 、 宽 度 、 外 框 颜色 、 背 景 颜色 、 水 平和 垂直 对 齐 方 
式 。 表 格 行 的 各 属性 如 表 1-6 所 示 。 


表 1-6 表格 行 的 属性 


属性 名 称 说 明 
height 在 <t> 标 记 中 时 ， 可 以 控制 表格 内 某 行 的 高 度 
bordercolor 控制 表格 中 某 行 的 外 框 颜色 
bgcolor 控制 该 行 单元 格 的 背景 颜色 
align 控制 本 行 中 各 单元 格 的 内 容 在 水 平方 向 的 对 齐 方式 
valign 控制 本 行 中 各 单元 格 的 内 容 在 垂直 方向 的 对 齐 方式 。 取 值 为 top( 上 对 齐 )、 
middle( 居 中 对 齐 ) 和 bottom( 下 对 齐 ) 
4. 单元 格 的 属性 


单元 格 属性 用 于 控制 表格 中 具体 某 个 单元 格 的 显示 方式 ， 单 元 格 的 属性 如 表 1-7 所 示 。 
表 1-7 单元 格 的 属性 


属性 名 称 说 明 
bordercolor 单元 格 的 边框 颜色 
bgcolor 单元 格 的 背景 颜色 
align、valign 单元 格 内 的 文字 水 平 、 垂 直 对 齐 方式 
colspan 控制 单元 格 合 并 右 方 的 单元 格 数 ， 达 到 延伸 单元 格 的 效果 
IOWSpan 控制 单元 格 合 并 下 方 的 单元 格 数 ， 达 到 垂直 延伸 单元 格 的 效果 S| 
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【 例 1.20】 
上 述 属 性 中 的 bordercolor、bgcolor、align 和 valign 属性 与 表格 和 表格 行 相同 。 这 里 主 
要 介绍 使 用 colspan 和 rowspan 属性 实现 单元 格 的 合并 。 
这 里 以 图 1-19 中 的 表格 为 例 。 


© D fieV/DVwwwRooVblog/tablelLhtml 


1-19 ”跨行 和 跨 列表 格 


实现 跨行 和 跨 列 的 效果 需要 使 用 单元 格 的 rowspan 属性 和 colspan 属性 ， 其 属性 值 为 
要 跨越 的 行 数 和 列 数 。 
具体 代码 如 下 : 


<table border="5" cellpadding="10" width="100%" bgcolor="#CCCCCC"> 
<* 和 EE 
<th width="25%"> 香 水 系列 </th> 
<th width="50%"> 说 明 </th> 
<th width="25%"> 品 牌 </th> 
</tr> 
<tr> 
<td valign="top"> 奇 迹 香水 </td> 
<td align="center"> 香 调 : 水 果 花 香 调 <br /> 
前 味 : 荔枝 、 小 莒 兰 <br /> 
中 味 : 木兰 花 、 青 姜 <br /> 
后 味 : 茉莉 、 廊 香 、 琥 珀 </td> 
<td rowspan="2"> 兰 茂 </td> 
<HEE> 
<Er> 
<td valign="bottom"> 魔 幻 香 水 </td> 
<td> 香 调 : 清新 花香 调 <br /> 
前 味 : 紫罗兰 花瓣 、 胡 椒 粉 <br /> 
中 味 : 保加利亚 玫瑰 <br /> 
后 味 : 香 柏 、 三 叶 草 花 斩 </tq> 
</Er> 
<Er> 
<td> 爱 恋 香 水 </td> 
<td colspan="2" align="center"> 暂 无 资料 </td> 
</Er> 
</table> 
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1.6 表单 标记 


表单 在 Web 网 页 中 用 来 给 访问 者 填写 信息 ， 从 而 能 获得 用 户 信息 ， 使 网 页 具有 交互 的 
功能 。 一 般 是 将 表单 设计 在 一 个 HIML 文档 中 ， 当 用 户 填写 完 信 息 后 做 提交 (submib 操 作 
时 ， 表 单 的 内 容 就 从 客户 端的 浏览 器 传送 到 服务 器 上 ， 经 过 服务 器 上 的 ASP 或 CGI 等 处 
理 程序 处 理 后 ， 再 将 用 户 所 需 信息 传送 回 客 户 端的 浏览 器 上 ， 这 样 网 页 就 具有 了 交互 性 。 


(el 创建 表单 


表单 在 HTML 中 由 <form> 标 记 定 义 ， 它 是 HTML 的 一 个 重要 组 成 部 分 ， 主 要 用 于 搜 
集 不 同类 型 的 用 户 输入 和 进行 数据 传递 。 在 HTML 表单 中 包含 了 很 多 表单 元 素 ， 通 过 它们 
允许 用 户 单 击 、 选 择 和 输入 信息 。HTML 表单 的 创建 语法 如 下 所 示 : 
<form name="form name" method="method" action="url" enctype="value" 
target="target" id="id"> 


<!-- 此 处 放 表单 元 素 ， 这 里 省 略 -=-> 


</form> 
在 上 述 代 码 中 ， 表 单 各 个 属性 的 说 明 如 表 1-8 所 示 。 
表 1-8 表单 属性 说 明 


二 > 入 窜 1NLH 志 1 油 网 


属性 名 称 说 明 
name 表单 的 名 称 
method 设置 表单 的 提交 方式 ， 有 GET 和 POST 两 种 
action 指向 处 理 该 表单 页 面 的 URL， 可 以 是 相对 位 置 或 者 绝对 位 置 
enctype 设置 表单 内 容 的 编码 方式 
target 设置 返回 信息 的 显示 方式 ， 可 选 值 有 blank、_parent、_self 和 top 
id 表单 的 ID 号 


(1.6.2 创建 表单 元 素 

创建 表单 完成 后 ， 用 户 可 以 向 表单 中 添加 其 他 的 标记 元 素 了 。 一 般 情况 下 ， 按 照 用 户 
需要 填写 的 方式 ， 分 为 输入 类 元 素 和 菜单 列表 类 元 素 。 此 外 ， 还 有 一 种 textarea 元 素 。 

1. 输入 类 元 素 

输入 类 的 元 素 一 般 都 是 以 <input> 标 记 开 始 ， 它 的 常用 语法 如 下 : 

<input type=" 元 素 类 型 "name=" 元 素 名 称 "” /> 

上 述 语法 中 最 重要 的 是 属性 type， 该 属性 确定 了 元 素 的 类 型 ， 表 1-9 对 type 的 常用 属 Sp 8 
性 值 进行 了 说 明 。 CS 
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表 1-9 type 属性 的 常用 值 


type 取 值 说 明 

text 普通 的 文字 输入 字段 

assWOTd 密码 输入 框 ， 用 户 向 该 框 中 输入 内 容 时 ， 不 显示 具体 内 容 ， 而 是 以 * 代 蔡 
Tadio 单 选 按钮 
checkbox 复 选 框 
button/submit/reset 普通 按钮 /提交 按钮 / 重 置 按 钮 
imag: 图 形 域 ， 也 叫 图 像 提交 按钮 
hidden 隐藏 域 ， 并 不 会 显示 到 页 面 上 ， 只 是 将 内 容 传递 到 服务 器 中 
file 文件 域 


可 以 向 页 面 中 添加 元 素 供 用 户 注册 时 接受 用 户 输入 。 例 如 ， 下 面 的 代码 分 别 用 来 接受 
用 户 向 表单 中 添加 用 户 名 、 密 码 、 性 别 和 个 人 头像 : 
<form action="# " name="register" method="post" target=" parent"> 
用 户 名 称 : <input name="txtUserName" type="text" /><br /><br /> 
用 户 密 码 : <input name="txtUserPass" type="password" /><br /><br /> 
用 户 性 别 : <input id="rdoBoy" name="Sex" type="radio" /> 男 
<input id="rdoGirl" name="Sex" type="radio" /> 女 <br /><br /> 
个 人 头像 ， <input id="txtImage" type="file" /> 
</form> 
上 述 代 码 中 ， 由 于 用 户 的 性 别 只 能 是 “ 男 ” 或 “ 女 ”， 因 此 选中 其 中 一 个 单 选 按钮 
时 ， 另 一 个 单 选 按钮 就 不 能 选中 。 要 实现 这 样 的 功能 ， 可 以 同时 将 单 选 按钮 的 name 属性 
的 值 设 为 相同 的 。 
2. textarea 
textarea 称 为 文本 区 域 框 ， 它 使 用 户 能 添加 多 行文 本 内 容 ， 例 如 个 人 介绍 、 图 书简 介 或 
留言 内 容 都 可 以 使 用 <textarea> 标 记 。 它 的 语法 如 下 : 
<textarea id=" 文 本 域 ID"” name=" 文 本 域名 称 ”value=" 默 认 文本 ”rows=" 行 数 " 


cols=" 列 数 "> </textarea> 
例如 ， 为 页 面 添 加 一 个 行 数 为 5， 列 数 为 40 的 文本 域 。 代 码 如 下 : 


<textarea name="message" rows="5" cols="40"></textarea> 


3， 菜单 列表 类 元 素 
菜单 列表 常常 将 <select> 与 <option> 标 记 结 合 起 来 ， 如 果 将 <selec 作 标记 的 multiple 属性 
的 值 设 置 为 ue， 则 会 向 页 面 显示 一 个 列表 项 。 菜 单列 表 标 记 的 语法 如 下 : 
<select name=" 下 拉 菜 单 名 称 "> 
<option value selected="selected"> 选 项 显示 内 容 </option> 


<option value=" 选 项 值 "> 选项 显示 内 容 </option> 
</select> 
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菜单 列表 项 可 包含 多 个 属性 ， 如 name、size、value 等 ， 属 性 说 明 如 下 。 
e@ name: 菜单 和 列表 项 的 名 称 。 
size: 显示 选项 的 数目 。 
value: 获取 选中 项 的 值 。 
multiple: 设置 列表 中 的 项 目 是 否 多 选 。 
selected: 默认 选择 项 。 
【 例 1.21】 
下 面 分 别 显示 菜单 项 和 列表 项 ， 并 设置 它们 的 属性 ， 实 现 步骤 如 下 。 
在 页 面 中 使 用 <select> 标 记 创建 一 个 可 多 选 的 列表 ， 并 指定 宽度 、 大 小 和 名 
称 。 代 码 如 下 : 
<p class="text"> 喜欢 的 香水 产地 : 
<select id="ad" name="ad" multiple="multiple" size="4" width="150"> 
<option value=" 中 国 "> 中 国 </option> 
<option value=" 法 国 "> 法 国 </option> 
<option value=" 英 国 "> 英国 </option> 
<option value=" 美 国 "> 美国 </option> 
<option value=" 丹 麦 "> 丹麦 </option> 
<option value=" 其 他 国家 "> 其 他 国家 </option> 
</select></p> 
继续 向 页 面 中 添加 <select> 和 <option> 标 记 ， 实 现 一 个 单 选 的 下 拉 列 表 。 代 码 
如 下 : 
<p class="text"> 喜 欢 的 品牌 : 
<select id="band" name="band" style="width: 150px"> 
<option value=" 香 奈 尔 "> 香奈 尔 </option> 


<option 兰若 "selected="selected"> 兰 区 </option> 
<option 人 角 "> 兰 颁 </option> 
<option value=" 和 雅顿"> 雅 顿 </option> 
<option value=" 其 他 "> 其 他 </option> 


</select></p> 


妇 池 03| 运行 页 面 查看 效果 ， 如 图 1-20 所 示 。 


1-20 ”创建 菜单 项 和 列表 项 
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邮 提示 : 截止 到 目前 ， 本 章 已 经 向 读者 介绍 了 HTML 中 经 常 使 用 的 一 些 标记 元 素 ， 
HTML 中 的 标记 远 远 不 止 这 些 ， 其 他 的 还 有 <span>、<fieldset> 和 <button> 等 ， 读 者 可 以 
在 网 上 找 资料 ， 也 可 以 参考 与 HTML 有 关 的 书籍。 


1.7 实战 一 制作 卡通 类 页 面 


在 本 节 之 前 已 经 介绍 了 HTML 文档 的 结构 、 常 用 基础 标记 ， 以 及 在 页 面 中 使 用 列表 、 
表格 和 表单 的 方法 。 在 本 章 最 后 将 综合 这 些 知识 制作 一 个 卡通 类 的 HTML 完整 页 面 ， 最 终 
运行 效果 如 图 1-21 所 示 。 
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1-21 卡通 类 页 面 的 最 终 效果 


<center> 
<img src="images/head jinhua.jpg" width="778" height="177" /> 

</center> 

在 图 片 下 方 添加 一 个 一 行 两 列 的 表格 。 设 置 表格 为 无 边框 和 间隔 、 居 中 对 
齐 、 宽 度 为 778。 

国 女 06| 设置 第 1 个 单元 格 为 水 平 居中 对 齐 、 垂 直 顶 部 对 齐 ， 并 向 单元 格 内 插入 一 张 
图 片 。 设 置 第 2 个 单元 格 为 垂直 项 部 对 齐 ， 背 景 颜色 为 二 FFFFF。 此 时 的 表格 代 
码 如 下 : 


<table width="778" border="0" align="center" cellpadding="0" 
cellspacing="0"> 
<tr> 


C9 


名 

第 

<td align="center" valign="top"> ‘ah 

<img src="images/ny list 001.jpg" alt="" width="188" 章 

height="66" /> i 

</td> 本 | 

<td valign="top" bgcolor="#FFFFFF"> 三 

<!-- 第 2 个 单元 格 =-> 快 

</td> 速 

</tr> 
</table> 


回国 07| 向 上 面 第 2 个 单元 格 内 嵌 套 一 个 两 行 一 列 的 表格 。 设 置 表格 为 无 边框 和 间 
隔 、 居 左 对 齐 、 宽 度 为 100%。 设 置 第 一 行 的 单元 格 为 垂直 项 部 对 齐 ， 并 在 单元 
格 内 插入 4 张 图 片 。 代 码 如 下 所 示 : 


<table width="100%" border="0" align="left" cellpadding="0" 
cellspacing="0"> 
<tr> 
<td valign="top"> 
<img src="images/home.jpg" width="94" height="32" /> 
<img src="images/bt1.jpg" /> 
<img src="images/bt2.jpg" /> 
<img src="images/bt3.jpg" /> 
</td> 
</tr> 
<<>> 
<td valign="top"> <!-- 第 2 行 的 单元 格 --></td> 
<VEr> 
</table> 


在 第 2 行 的 单元 格 内 使 用 <h2> 标 记 定义 一 个 名 为 “早期 教育 ”的 标题 。 代 
码 如 下 : 
<h2> 早 期 教育 </h2> 

使 用 <dl> 标 记 罗 列 标题 的 中 文 名 称 和 英文 名 称 。 代 码 如 下 ; 


<dl> 
<dt> 中 文 名 称 </dt> 
<dd> 早 期 教育 </dd> 
<dt> 英 文 名 称 </dt> 
<dd>Early Education</dd> 
</dl> 


国 吾 10| 创建 一 个 段落 ， 并 使 用 <br> 标 记 显示 为 两 行 。 代 码 如 下 : 


<p>&nbsp; gnbsp; gnbsp; gnbsp; 广 义 指 从 人 出 生 到 小 学 以 前 阶段 的 教育 ， 狭 义 主要 指 上 述 
阶段 的 早期 学 习 。<br/> 

gnbsp; &nbsp; gnbsp; gnbsp; 家 庭 教育 对 早期 教育 有 重大 影响 。 其 中 “体能 、 智 能 、 心 理 
能 力 三 维 平衡 发 展 ”理论 最 为 科学 ， 依 据 五 万 份 孩子 成 长 基准 数据 ， 提 炼 出 孩子 的 九 大 成 长 目 
标 : 安全 感 、 意 志 力 、 目 标 感 、 注 意 力 、 记 忆 力 、 思 维 能 力 、 平 衡 、 力 量 和 速度 。 </p> 


ET 经 过 上 面 的 步 台 ， 表格 的 编辑 与 制作 就 结束 了 。 在 最 外 层 表格 的 下 方 定义 一 
个 段落 来 显示 页 面 的 辅助 信息 。 代 码 如 下 所 示 : 


<p align="center"> CO) 


全 
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<a href="#"> 关 于 我 们 </a> | <a href="#"> 免 责 声明 </a> 
1 <a href="#"> 广 告 合 作 </a> | <a href="#"> 联 系 方式 </a> 


<hr /> 
<center> 
版 权 所 有 <b> 窗 内 网 </b> 

</center> 

</p> 
上 述 代码 使 用 <a> 标 记 创 建 了 4 个 链接 ， 使 用 <hr> 标 记 绘制 水 平 线 ， 将 链接 信息 与 版 

权 信 息 隔 开 。 
1.8 本 章 习 题 

1. 填空 题 
(1) 在 一 个 HTML 文档 中 使 用 标记 页 面 的 主体 内 容 。 
(2) 为 网 页 添加 描述 信息 时 需要 将 元 信息 标记 的 属性 指定 为 description。 
(3) HTML 中 创建 超 链 接 时 需要 使 用 标记 。 
(4) 创建 无 序列 表 时 ，<ol> 标 记 type 属性 的 默认 值 是 
(5) 使 用 列表 标记 中 的 标记 可 以 创建 有 序 编 号 。 
(6) 在 定义 列表 时 ， 可 以 使 用 <dl> 标 记 的 定义 名 称 。 


(7) 控制 表格 边框 的 属性 为 
(8) 向 表单 添加 文件 上 传 文本 框 ， 需 要 将 <input> 标 记 的 type 属性 指定 为 


2. 选择 题 
(1) 标题 标记 符 中 标记 表示 最 大 的 标题 。 

A. <hl> B. <h5> C. <h6> D. <h7> 
(2) 下 列 使 用 HTML 注释 的 情形 正确 的 是 

A.， <I-- 我 是 注释 --> B. // 我 是 注释 

C， 必 我 是 注释 4/ D. 《我 是 注释 》 


(3) 阅读 下 面 一 段 HTML 代码 ， 其 显示 效果 为 


<body bgcolor="#FFFFFF" text="#FF0000"> 
<h1 color="#00FF00"> 网 页 设计 </h1> 


</body> 

A.， 自 底 红 字 B. 和 白 底 绿 字 C. 黑 底 绿 字 D. 黑 底 红 字 
(4) 在 HTML 中 ， 定义 有 序列 表 的 有 序列 表 标 记 符 是 

A. <ul> B. <ol> C. <d> D. <I> 
(5) 关于 align 属性 的 取 值 ， 下 列 哪 项 是 错误 的 ? 


A. left、 right、 center B. nght、 left、 middle 
C. center、 right、 middle D. left、 middle、center 


(6) 在 HTML 中 创建 一 个 普通 的 表格 时 不 应 包括 标记 符 。 
A. <table> B. <title> C. <t> D. <td> 和 <th> 
(7) 定义 表格 中 一 行 的 标记 是 
A. <tr> B. <th> C. <td> D. <table> 
(8) 关于 表格 标记 的 说 法 ， 下 面 选 项 是 不 正确 的 。 
A.， <thead>、<tbody> 和 <tfoot> 标 记 可 以 用 来 明确 表格 结构 ， 它 们 分 别 对 表 首 、 
表 主 体 和 表 尾 的 样式 进行 设置 。 
B.，width 和 height 属性 只 能 在 表格 的 <table> 标 记 中 使 用 ，<td> 和 <tr> 标 记 中 不 能 
使 用 。 
C. 向 表格 中 添加 <caption></caption> 并 在 它们 的 中 间 添 加 文本 内 容 ， 所 添加 的 文 
本 内 容 会 作为 表格 的 标题 。 


D. 不 仅 可 以 通过 表格 的 background 属性 添加 背景 ， 还 可 以 通过 在 表格 的 style 属 
性 中 设置 参数 的 属性 和 值 来 添加 背景 。 


3. 上 机 练习 


(1) 制作 一 个 表格 

根据 本 章 学 习 的 表格 知识 ， 在 HTML 中 绘制 一 个 如 图 1-22 所 示 的 表格 ， 注 意 单元 的 
对 齐 方式 以 及 单元 格 的 合并 。 

(2) 制作 一 个 表单 

根据 本 章 学 习 的 表单 知识 ， 在 HTML 中 绘制 一 个 如 图 1-23 所 示 的 表单 ， 注 意 表 单元 
素 属 性 的 定义 。 


EC eR " 
© Dfie///D/wwwRoot/test.html 四 $$ 名 > 国 = © OD file///D/wwwRoot/test2.html 
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CSS 基础 


CSS 样式 表 用 于 为 HTML 标记 设计 样式 。HTML 标记 原本 被 设计 为 用 于 定 

叉 文档 内 容 。 通 过 使 用 <hl>、<p>、<table> 这 样 的 标记 ， 表 达 “这 是 标题 ”、 
“这 是 段落 ”、“ 这 是 表格 ”之 类 的 信息 。 同 时 文档 布局 由 浏览 器 来 完成 ， 而 不 

使 用 任何 格式 化 标记 。 

由 于 浏览 器 不 断 地 将 新 的 HTML 标记 和 属性 (比如 字体 标记 和 颜色 属性 ) 添 加 
到 HIML 规范 中 ， 创 建文 档 内 容 清 晰 地 独立 于 文档 表现 层 的 站 点 变 得 越 来 越 困 难 。 

为 了 解决 这 个 问题 ， 万 维 网 联盟 (W3C) 这 个 非 营利 的 标准 化 联盟 ， 肩 负 起 了 
HITMTS 和 标准化 的 使 命 ， 并 在 HTML 之 外 创造 出 样式 (Style)。 目 前 所 有 的 主流 浏 
览 器 均 支持 层 才 立 二 家。 本 这 将 详细 介绍 样式 表 的 由 来 和 基础 语法 。 

本 章 学 习 目 标 : 

掌握 CSS 与 HTML 的 结合 方法 
了 解 CSS 的 语法 规则 
理解 CSS 选择 器 的 分 组 和 继承 
掌握 CSS 背景 样式 的 使 用 
掌握 CSS 文本 样式 的 使 用 
掌握 CSS 字体 样式 的 使 用 
掌握 CSS 链接 样式 的 使 用 
掌握 CSS 列表 样式 的 使 用 
掌握 表格 和 轮廓 的 样式 使 用 
掌握 框 模型 的 样式 使 用 


ieeeeeeee 
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2.1 CSS 概述 


CSS(Cascading Style Sheets) 层 和 登 样 式 表 定 义 如 何 显示 HIML 元 素 ， 包 括 对 字体 、 颜 
色 、 边 框 等 样式 进行 设置 。 


CE; CSS 简 介 


CSS 样式 通常 保存 在 外 部 的 .css 文件 中 。 通 过 仅仅 编辑 一 个 简单 的 CSS 文档 ， 外 部 样 

式 表 可 以 同时 改变 站 点 中 所 有 页 面 的 布局 和 外 观 。 
于 允许 同时 控制 多 重 页 面 的 样式 和 布局 ，CSS 可 以 称 得 上 Web 设计 领域 的 一 个 突 
破 。 除 此 之 外 ， 还 能 够 为 每 个 HTML 元 素 定义 样式 ， 并 将 其 应 用 于 人 们 所 希望 的 任意 多 的 
页 面 中 。 如 需 进 行 全 局 的 更 新 ， 只 需 简单 地 改变 样式 ， 然 后 网 站 中 的 所 有 元 素 均 会 自动 地 
更 新 。 

样式 表 从 1990 年 代 初 HTML 被 发 明 开 始 ， 就 以 各 种 形式 出 现 了 ， 不 同 的 浏览 器 结合 
了 它们 各 自 的 样式 语言 ， 读 者 可 以 使 用 这 些 样式 语言 来 调节 网 页 的 显示 方式 。 

一 开始 ， 样 式 表 是 给 读者 用 的 ， 最 初 的 HTML 版 本 只 含有 很 少 的 显示 属性 ， 由 读者 来 

但 随 着 HTML 的 成 长 ， 为 了 满足 设计 师 的 要 求 ，HTML 获得 了 很 多 显示 功能 。 随 着 这 
些 功 能 的 增加 ， 外 来 定义 样式 的 语言 越 来 越 没有 意义 了 。 

1994 年 哈 坤 。 利 提出 了 CSS 的 最 初 建议 。 伯 特 。 波 斯 (Bert Bos) 当 时 正在 设计 一 个 叫 
作 Argo 的 浏览 器 ， 他 们 决定 一 起 合作 设计 CSS。 

当时 已 经 有 过 一 些 样式 表 语 言 的 建议 了 ， 但 CSS 是 第 一 个 含有 “ 层 且 ”概念 的 。 在 
CSS 中 ， 一 个 文件 的 样式 可 以 从 其 他 的 样式 表 中 继承 下 来 。 读 者 在 有 些 地 方 可 以 使 用 自己 
更 喜欢 的 样式 ， 在 其 他 地 方 则 继承 ， 或 “ 层 登 ”作者 的 样式 。 这 种 层 登 的 方式 使 作者 和 读 
者 都 可 以 灵活 地 加 入 自己 的 设计 ， 混 合 各 人 的 爱好 。 

哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 建议 ，1995 年 他 与 波斯 一 
起 再 次 展示 这 个 建议 。 当 时 W3C 刚刚 创建 ，W3C 对 CSS 的 发 展 很 感 兴趣 ， 还 为 此 组 织 
一 次 讨论 会 。 哈 坤 、 波 斯 和 其 他 一 些 人 (比如 微软 的 托马斯 。 雷 尔 登 ) 是 这 个 项 目的 主要 技 
术 负 责 人 。1996 年 底 ，CSS 已 经 完成 。1996 年 12 月 CSS 的 第 一 个 版 本 被 推出 。 

1997 年 初 ，W3C 内 组 织 了 专门 管理 CSS 的 工作 组 ， 其 负责 人 是 克 里 斯 。 里 雷 。 这 个 
工作 组 开始 讨论 第 一 版 中 没有 涉及 到 的 问题 ， 其 结果 是 1998 年 5 月 推出 了 第 二 版 要 求 。 
作为 一 项 W3C 推荐 ，CSS 2 发 布 于 1999 年 1 月 11 日。CSS 2 添加 了 对 媒介 (打印 机 
和 听觉 设备 ) 和 可 下 载 字体 的 支持 。 

CSS 不 同 的 版 本 所 支持 的 样式 不 同 ， 表 现 如 下 。 
(1) 1996 年 12 月 发 表 的 CSS 1 的 要 求 如 下 所 示 : 
e@ 支持 字体 的 大 小 、 字 形 、 强 调 。 

e@ 支持 字 的 颜色 、 背 景 的 颜色 和 其 他 元 素 。 


支持 文章 特征 ， 如 字母 、 词 和 行 之 间 的 距离 。 
支持 文字 的 排列 、 图 像 、 表 格 和 其 他 元 素 。 
支持 边缘 、 围 框 和 其 他 关于 排版 的 元 素 。 
支持 id 和 class。 

(2) 1998 年 5 月 W3C 发 表 了 CSS 2， 其 中 包括 新 的 内 容 ， 如 下 所 示 : 

e@ 绝对 的 、 相 对 的 和 固定 的 定 比 特 素 、 媒 体型 的 概念 。 

@ ”双向 文件 和 一 个 新 的 字体 。 

(3) CSS 2.1 修改 了 CSS 2 中 的 一 些 错误 ， 删 除了 其 中 基本 不 被 支持 的 内 容 和 增加 了 
一 些 已 有 的 浏览 器 的 扩展 内 容 。 

(4) CSS 目前 最 新 版 本 为 CSS 3， 是 能 够 真正 做 到 网 页 表现 与 内 容 分 离 的 一 种 样式 设 
计 语 言 。 

相对 于 传统 HTML 的 表现 而 言 ，CSS 能 够 对 网 页 中 的 对 象 的 位 置 排版 进行 像素 级 的 精 
确 控 制 ， 支 持 几乎 所 有 的 字体 字号 样式 ， 拥 有 对 网 页 对 象 和 模型 样式 编辑 的 能 力 ， 并 能 够 
进行 初步 交互 设计 ， 是 目前 基于 文本 展示 最 优秀 的 表现 设计 语言 。CSS 能 够 根据 不 同 使 用 
者 的 理解 能 力 ， 简 化 或 者 优化 写法 ， 针 对 各 类 人 群 ， 有 较 强 的 易 读 性 。 


CE CSS 的 使 用 


CSS 语句 运行 在 客户 端 ， 需 要 榜 入 在 HTML 中 借助 浏览 器 来 执行 。CSS 语句 可 以 以 语 
句 的 形式 直接 嵌入 HTML 内 部 ; 也 可 以 在 HTML 中 引用 外 部 CSS 文件 。CSS 语句 所 存在 
的 位 置 有 以 下 3 种 : 

e@ 外 部 样式 表 。 

@ ”内 部 样式 表 (位 于 <head> 标 记 内 部 )。 

e@ ”内 联 样式 (在 HTML 元 素 内 部 )。 

上 述 3 种 样式 存在 形式 可 同时 使 用 ， 也 可 单独 使 用 ， 这 种 使 用 方式 称 作 多 重 样式 。 

多 重 样 式 允 许 在 单个 HTML 元 素 中 、 在 HTML 页 的 头 元 素 中 ， 或 在 一 个 外 部 的 CSS 
文件 中 ， 甚 至 可 以 在 同一 个 HTML 文档 内 部 引用 多 个 外 部 样式 表 。 

但 多 种 样式 的 使 用 可 能 存在 样式 设置 的 冲突 ， 如 页 面 的 大 多 表格 背景 色 都 是 黄色 ， 但 
其 中 一 个 背景 色 需 要 是 红色 ， 那 么 可 以 定义 页 面 的 表格 颜色 为 黄色 ， 并 对 指定 的 表格 在 其 
内 部 设置 背景 色 为 红色 。 

在 这 3 种 样式 使 用 中 ， 内 联 样式 拥有 最 高 的 优先 权 ， 其 次 是 内 部 样式 表 ， 最 后 是 外 部 
样式 表 。 

这 意味 着 内 联 样式 将 优先 于 以 下 的 样式 声明 : <head> 标 记 中 的 样式 声明 、 外 部 样式 表 
中 的 样式 声明 ， 或 者 浏览 器 中 的 样式 声明 (默认 值 )。 

这 几 种 方法 中 每 一 种 方法 都 有 其 优 缺 点 ， 可 以 根据 以 下 几 种 情况 ， 判 断 需 要 使 用 哪 种 
样式 设置 : 

@ 当 要 在 站 点 上 所 有 或 部 分 网 页 上 一 致 地 应 用 相同 样式 时 ， 可 使 用 外 部 样式 表 。 在 

一 个 或 多 个 外 部 样式 表 中 定义 样式 ， 并 将 它们 链接 到 所 有 网 页 ， 便 能 确保 所 有 网 
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页 外 观 的 一 臻 性。 如果 决定 更 改 样式 ， 只 需 在 外 部 样式 表 中 修改 一 次 ， 而 该 更 改 Ke 
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会 反映 到 所 有 与 该 样式 表 相 链接 的 网 页 上 。 

。 ” 当 只 是 要 定义 当前 网 页 的 样式 时 ， 可 使 用 内 入 的 样式 表 。 民 入 的 样式 表 是 一 种 级 
联 样式 表 ， 柑 在 网 页 的 <head> 标 记 符 内 。 嵌 入 的 样式 表 中 的 样式 只 能 在 同一 网 页 
上 使 用 。 

。” 当 只 需要 定义 当前 html 标记 的 样式 时 ， 可 使 用 内 联 样式 。 内 联 样式 设置 在 html 
标记 内 部 ， 只 对 一 个 html 标记 有 效 。 

1 外 部 样式 表 


样式 通常 保存 在 外 部 的 .css 文件 中 。 通 过 仅仅 编辑 一 个 简单 的 CSS 文档 ， 外 部 样式 表 
使 你 有 能 力 同时 改变 站 点 中 所 有 页 面 的 布局 和 外 观 。 

外 部 样式 表 通 常 以 .css 作为 文件 扩展 名 ,例如 Mystyles.css。 然 后 在 需要 此 样式 的 页 面 
中 将 其 链接 进来 ， 代 码 如 下 : 


<link href="Mystyles.css" rel="stylesheet" type="text/css"/> 


2， 内 部 样式 表 


内 部 样式 表 通 常 放 在 <head> 标 记 内 ， 内 部 样式 表 以 <style type="text/css”> 标 记 开 始 ， 
以 </style> 标 记 结 束 ， 在 这 两 个 标记 之 间 编 辑 样式 代码 ， 如 下 所 示 : 
<style type="text/css"> 
/* 样 式 设置 */ 
</style> 


3. 内 联 样式 

内 联 样式 放 在 HTML 标记 内 部 ， 以 标记 属性 的 方式 为 标记 设置 样式 。 该 属性 为 style 
属性 ， 如 为 <div> 标 记 设 置 样式 ， 使 其 背景 色 为 黄色 ， 代 码 如 下 : 

<div style="background-color: #FFFF00"> 

内 联 样式 

</div> 

【 例 2.1】 

分 别 对 一 个 页 面 的 <div> 标 记 定 义 外 部 样式 表 、 内 部 样式 表 和 内 联 样式 表 ， 为 页 面 添加 
3 个 <div> 标 记 ， 查 看 其 样式 表 的 执行 效果 ， 步 又 如 下 。 

国 吕 01| 定义 一 个 外 部 的 样式 表 style.css 并 添加 代码 如 下 : 

div { 

background-color: #FFFFO00; 


text-align: center; 


} 

上 述 代码 表示 将 背景 色 设置 为 黄色 ， 并 将 字体 居中 显示 。 背 景色 默认 是 白色 的 ， 而 字 
体 默 认 是 靠 左 对 齐 。 
回国 02| 创建 页 面 ， 并 在 <head> 标 记 下 添加 外 部 样式 表 ， 同 时 在 页 面 的 <body> 标 记 
下 添加 <div> 代 码 。 


a 
第 
具体 如 下 : Es 
章 
<!DOCTYPE html> oO 
CD 
<html> 3 
<head> 础 
<title></title> 


<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<div> 

外 部 样式 

</div> 
</body> 
</html> 


上 述 代码 中 没有 定义 <div> 的 样式 ， 只 是 添加 了 文字 “外 部 样式 ”。 
向 页 面 中 添加 <div> 并 添加 其 内 部 样式 ， 即 直接 对 <div> 标 记 进行 样式 设 
置 ， 设 置 其 背景 色 为 蓝 色 ， 而 不 定义 字体 的 对 齐 方式 ， 代 码 如 下 : 
<div style="background-color: #00FFFF"> 
内 部 样式 
</div> 
在 <head> 标 记 下 添加 内 部 样式 表 div1， 该 样式 表 只 定义 背景 色 为 红色 ， 不 
定义 字体 的 对 齐 方式 ， 代 码 如 下 : 
<style type="text/css"> 
divl { 
background-color: #FFOOFF; 
} 
</style> 
在 页 面 中 添加 <div>， 使 用 内 部 的 样式 ， 代 码 如 下 : 
<div class="div1"> 
内 联 样式 
</div> 
在 浏览 器 中 运行 该 页 面 ， 其 效果 如 图 2-1 所 示 。 虽 然 这 3 个 <div> 块 使 用 了 
不 同 的 样式 ， 但 字体 都 是 居中 显示 的 ， 因 此 可 见 这 3 种 样式 仅仅 是 相互 冲突 的 间 
分 遵循 优先 顺序 ， 而 不 冲突 的 部 分 根据 已 经 定义 的 样式 来 显示 。 
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2.2 CSS 基础 语法 


本 章 2.1 节 介 绍 了 CSS 代码 的 使 用 方式 ， 本 节 介 绍 CSS 代码 的 基础 语法 。CSS 代码 的 
书写 是 针对 具体 的 HTML 标记 ， 其 定义 方式 是 样式 属性 名 称 、 冒 号 、 属 性 值 和 分 号 ， 如 下 
所 示 : 

属性 名 : 属性 值 ; 

上 述 代码 是 建立 在 指定 的 HTML 元 素 的 基础 上 ， 如 例 2.1 的 步骤 01 是 建立 在 div 的 基 
础 上 ， 有 着 背景 色 和 对 齐 方式 这 两 个 属性 的 设置 ， 分 别 设置 其 背景 色 为 黄色 ; 设置 其 对 齐 
方式 为 居中 显示 ， 代 码 如 下 : 

div { 

background-color: #FFFF007 


text-align:center; 


} 

上 述 代码 中 ，div 是 HTML 中 的 元 素 ， 为 元 素 设置 样式 ， 需 要 在 元 素 后 面 添加 大 括号 
“{”， 其 样式 设置 放 在 大 括号 内 部 。 上 述 代码 定义 之 后 ， 该 样式 设置 将 作用 于 引用 该 样 
式 文件 的 页 面 的 所 有 div 元 素 。 

在 CSS 中 ， 除 了 为 元 素 设置 样式 ， 还 可 以 定义 选择 器 来 设置 样式 ， 再 在 HTML 元 素 
中 根据 选择 器 来 显示 样式 。 上 述 代码 可 以 看 作 是 div 选择 器 样式 ， 该 样式 下 有 两 条 样式 设 
置 语句 (样式 声明 )。 

例 2.1 中 的 步骤 04 为 div 元 素 设置 了 名 为 “div1” 的 选择 器 ， 并 在 div 元 素 中 通过 
class 属性 进行 引用 。 

选择 器 通常 是 需要 改变 样式 的 HTML 元 素 ， 属 性 (property) 是 希望 设置 的 样式 属性 
(style attribute)。 每 个 属性 有 一 个 值 。 属 性 和 值 被 冒号 分 开 。 

如 果 要 定义 不 止 一 个 样式 声明 ， 则 需要 用 分 号 将 每 个 声明 分 开 。 下 面 的 例子 展示 出 如 
何 定义 一 个 红色 文字 的 居中 段落 。 最 后 一 条 规则 是 不 需要 加 分 号 的 ， 因 为 分 号 在 英语 中 是 
一 个 分 隔 符号 ， 不 是 结束 符号 。 然 而 ， 大 多 数 有 经 验 的 设计 师 会 在 每 条 声明 的 末尾 都 加 上 
分 号 ， 这 么 做 的 好 处 是 ， 当 从 现 有 的 规则 中 增 减 声明 时 ， 会 尽 可 能 地 减少 出 错 的 可 能 

是 否 包 含 空格 不 会 影响 CSS 在 浏览 器 的 工作 效果 ， 同 样 ， 与 XHTML 不 同 ，CSS 对 大 
小 写 不 敏感 。 不 过 存在 一 个 例外 : 如 果 涉 及 到 与 HTML 文档 一 起 工作 的 话 ，class 和 id 名 
称 对 大 小 写 是 敏感 的 。 

一 些 特殊 样式 的 属性 值 是 有 着 特殊 格式 的 ， 如 颜色 可 以 是 指定 的 单词 ， 也 可 以 是 十 六 
进 制 的 颜色 值 或 颜色 RGB 值 。 如 为 段落 元 素 P 设置 红色 字体 ， 有 如 下 几 种 方式 。 

(1) 使 用 英文 单词 red: 


Bl color: Ted 


(2) 使 用 十 六 进 制 的 颜色 值 : 


p { color: #f£ff0000; } 


(3) 使 用 CSS 的 缩写 形式 : 
ET color: 43£007 下 
(4) 使 用 颜色 RGB 值 “ 红 绿 蓝 ”: 


Bl colors rgbl255 0 D0) 
p { color: rgb(100%,0%,0%); } 


by 
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村 2 注意 : 当 使 用 RGB 百分比 时 ， 即 使 当 值 为 0 时 ， 也 要 写 百分比 符号 。 但 是 在 其 
他 的 情况 下 就 不 需要 这 么 做 了 。 比 如 说 ， 当 尺寸 为 0 像素 时 ，0 之 后 不 需要 使 用 px 单 
位 ， 因 为 0 就 是 0， 无 论 单 位 是 什么 。 


2.3 CSS 高 级 语 ; 


CSS 高 级 语法 是 对 选择 器 的 升级 ， 包 括 选择 器 分 组 、 继 承 和 重 写 等 。 通 过 对 选择 器 进 
行 操作 ， 影 响 页 面 中 元 素 的 显示 样式 。 


1. 选择 器 的 分 组 


对 选择 器 进行 分 组 可 以 使 被 分 组 的 选择 器 分 享 相同 的 声明 。 用 逗号 将 需要 分 组 的 选择 
器 分 开 。 
【 例 2.2】 
对 标题 元 素 进行 选择 器 分 组 ， 使 hl、h2、h3 都 显示 红色 字体 ， 创 建 页 面 并 添加 hl、 
h2、h3 和 一 个 段落 ， 查 看 其 显示 效果 ， 代 码 如 下 : 
<head> 
<style type="text/css"> 
Ri hn2 B31 
color: red; 
} 
</style> 
</head> 


<body> 
<h1> 标 题 h1</h1> 
<h2> 标 题 h2</h2> 
<h3> 标 题 h3</h3> 
<p> 段 落 </p> 
</body> 


在 浏览 器 中 运行 上 述 代码 ， 其 效果 如 图 2-2 所 示 。 

在 图 2-2 中 可 见 ，hl1、h2、h3 有 着 各 自 不 同 的 默认 字体 大 小 ， 对 其 进行 了 颜色 设置 之 
后 ， 这 3 个 标记 有 了 相同 的 字体 颜色 设置 ， 但 仍 以 不 同 的 字体 大 小 显示 。 段 落 没有 进行 样 
式 设 置 ， 显 示 的 是 默认 样式 。 
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标题 hl 
标题 h2 
标题 h3 
段落 


图 2-2 选择 器 分 组 
2. 继承 


在 CSS 中 ， 子 元 素 可 以 从 父 元 素 中 继承 属性 。 如 对 于 body 元 素 中 的 div 子 元 素 ， 可 
以 继承 body 元 素 的 样式 设置 。 
如 果子 元 素 需 要 使 用 不 同 的 样式 ， 那 么 可 对 子 元 素 进行 单独 设置 。 元 素 样式 的 设置 也 
有 者 子 元 素 和 父 元 素 不 同 的 优先 级 ， 子 元 素 的 样式 优先 级 大 于 父 元 素 ， 如 例 2.3 所 示 。 
【 例 2.3】 
对 body 元 素 中 的 div 子 元 素 设置 样式 为 居中 红色 字体 ; 在 div 元 素 中 段落 样式 为 靠 左 
对 齐 黑色 字体 ， 向 div 中 添加 标题 和 段落 ， 查 看 显示 效果 。 代 码 如 下 : 
<head> 
<style type="text/css"> 
div { 
color: red; 
text-align: center; 
» 
pt 
color: black; 
text-align: left; 
} 
</style> 
</head> 
<body> 
<div> 
<h1> 白 居 易 </h1> 
<p> 
白居易 (772~846) ， 字 乐天 ， 号 香山 居士 ， 又 号 醉 叭 先生， 河南 新 郑 ( 今 河 南 郑州 新 
郑 市 ) 人 ， 唐 代 伟大 的 现实 主义 诗人 ， 唐 代 三 大 诗人 之 一 。 白 居 易 与 元 积 共同 倡导 新 乐府 运动 ， 世 
称 “ 元 白 ”， 与 刘 豆 锡 并 称 " 刘 白 "。 
</p> 
</div> 
</body> 


上 述 代码 中 定义 了 div 和 p 的 样式 ， 并 没有 定义 标题 的 样式 。 但 hl 元 素 在 div 的 内 
部 ， 是 div 元 素 的 子 元 素 ， 因 此 遵循 div 样式 。 

虽然 p 元 素 也 是 div 元 素 的 子 元 素 ， 但 代码 中 有 对 p 元 素 样式 的 单独 定义 ， 从 优先 级 
来 看 ，p 元 素 显 示 其 单独 定义 的 样式 ， 效 果 如 图 2-3 所 示 。 
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白居易 【772 一 846) ， 字 乐天 ， 号 香山 居士 ， 又 号 醉 吟 先 生 ， 河 南 新 郑 〈 今 河南 郑州 
新 郑 市 ) 人 ， 唐 代 伟大 的 现实 主义 诗人 ， 唐 代 三 大 诗人 之 一 。 白 居 易 与 元 种 共同 信 导 
新 乐府 运动 ， 世 称 “ 元 白 ”， 与 刘 融 锡 并 称 刘 白 ”。 


图 2-3 样式 的 继承 和 重 写 


攻取 注意 :并 不 是 所 有 的 浏览 器 都 支持 样式 的 继承 ， 例 如 ，Netscape 4 就 不 支持 继 
承 ， 它 不 仅 忽 略 继承 ， 而 且 也 忽略 应 用 于 body 元 素 的 规则 。 正 浏览 器 中 直到 IE 6 还 存 
在 相关 的 问题 ， 在 表格 内 的 字体 样式 会 被 忽略 。 

3. 注释 

CSS 中 ， 语 句 是 可 以 嵌入 在 HIML 页 面 中 的 ， 但 是 其 注释 方式 与 HTML 并 不 相同 。 
CSS 代码 放 在 <style type=“text/css”> 和 </style> 标 记 之 间 ， 使 用 “/*” 和 “*/” 符 号 作为 注释 
语句 的 起 始 符号 。 如 将 div 块 中 的 字体 颜色 语句 设置 为 注释 语句 ， 代 码 如 下 : 

div { 

/*color: red;*/ 


text-align: center; 


} 


2.4 CSS 的 常用 样式 


本 章 前 面 几 个 小 节 总 结 了 CSS 样式 的 使 用 ， 本 节 将 详细 介绍 CSS 常用 的 样式 及 其 样 
式 设置 。 


41 CSS 常 用 样式 概述 


浏览 器 中 元 素 和 数据 的 显示 离 不 开 样 式 的 控制 ， 而 CSS 语言 是 页 面 样式 控制 的 主流 。 
通常 通过 style 属性 来 定义 页 面 显示 样式 ， 其 常用 的 样式 及 其 属性 控制 类 型 如 表 2-1 所 示 。 


表 2-1 CSS 的 常用 属性 
样 工 式 属 性 
大 小 | font-size(x-large 特大 ，xx-small 极 小 ， 可 用 数值 单位 ，PX、PD) 
样式 font-style(oblique 偏 斜体 ，italic 斜体 ， normal 正常 ) 
line-height( 单 位 : PX、PD、EM) 
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续 表 
样 式 天 性 
粗细 font-weight(bold 粗 体 ，lighter 细 体 ; normal 正常 ) 
修饰 text-decoration(underline 下 划 线 ; overline 上 划 线 ，line-through 删除 线 ; blink 闪烁 ) 
常用 字体 font-family 


背景 属性 background 

色彩 background-color: #FFFFFF。 
图 片 、background-image: url。 

重复 ”background-repeat: no-repeat 


字 间 距 letter-spacing 

对 齐 text-align(justify 两 端 对 齐 ; left 左 对 齐 ; right 右 对 齐 ; center 居中 ) 
缩 进 text-indent 

重 直 对 齐 Vertical-align(top; text-top; middle; bottom; text-bottom) 

空格 e-space(pre 保留 nowrap 不 换行 ) 


边框 属性 Border 

border-style(dotted 点 线 ; dashed 虚线 :soliddouble 双 线 ; groove 档 线 ， ridge 将 状 ; 
inset 凹陷 ，outset 凸现 )。 

border-width: 边框 宽度 。 

border-color: 颜色 


列表 属性 List-style(list-style-type: disc 圆 点 ;circle 圆圈 : square 方块 decimal 数字 lower- 
roman 小 罗马 数字 ) 
通过 CSS 样式 表单 ， 可 以 对 XML 元 素 的 外 观 进 行 设置 ， 如 文本 的 样式 、 布 局 、 背 景 
颜色 和 边框 等 。 


CSS 能 够 很 好 地 控制 输出 的 样式 ， 比 如 色彩 、 字 体 、 大 小 等 ， 但 是 CSS 只 适合 用 于 输 
出 比较 固定 的 最 终 文档 。CSS 的 优点 是 简洁 ， 消耗 系统 资源 少 。 


2.4.2 ”背景 样式 


背景 样式 的 设置 包括 背景 颜色 设置 、 背 景 图 片 路 径 设置 、 背 景 图 片 重复 设置 、 背 景 图 
片 百 分 比 设 置 、 背 景 图 片 位 置 设置 等 。 
背景 色 


使 用 background-color 属性 为 元 素 设 置 背 景色 。 cbcaie saat ?法 的 颜色 值 。 如 
果 希 望 背 景色 从 元 素 中 的 文本 向 外 稍 有 延伸 ， 只 需 增 加 一 些 内 边 
background-color 不 能 继承 ， 其 默认 值 是 transparent。transparent 有 “透明 ”之 意 。 也 
是 说 ， 如 果 一 个 元 素 没 有 指定 背景 色 ， 那 么 背景 就 是 透明 的 ， 这 样 其 父 元 素 的 背景 才能 
见 。 
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2. 背景 图 像 


要 把 图 像 放 入 背景 ， 需 要 使 用 background-image 属性 。background-image 属性 的 默认 
值 是 none， 表 示 背 景 上 没有 放置 任何 图 像 。 
如 果 需 要 设置 一 个 背景 图 像 ， 必 须 为 这 个 属性 设置 一 个 URL 值 ， 如 下 所 示 : 


body { background-image: url (img.gif); } 


大 多 数 背 景 都 应 用 到 body 元 素 ， 不 过 并 不 仅 限 于 此 。 在 CSS 中 可 以 为 元 素 设置 背景 
图 片 ， 甚 至 可 以 向 textarea 和 select 等 奉 换 元 素 的 背景 应 用 图 像 ，background-image 也 不 能 
继承 。 事 实 上 ， 所 有 背景 属性 都 不 能 继承 

各, 首 么 重复 


于 背景 图 片 有 大 有 小 ， 若 图 片 大 于 元 素 区域 ， 那 么 图 片 默认 不 完全 显示 ; 若 图 片 小 
于 元 素 区 域 ， 那 么 图 片 将 在 区 域内 默认 重复 显示 。 

如 果 需 要 在 页 面 上 对 背景 图 像 进行 平 铺 ， 可 以 使 用 background-repeat 属性 。 该 属性 的 
可 取 值 如 表 2-2 所 示 。 


表 2-2 背景 图 片 的 重复 属性 


属性 值 说 明 
repeat 默认 。 背 景 图 像 将 在 垂直 方向 和 水 平方 向 重复 
Tepeat-X 背景 图 像 将 在 水 平方 向 重复 
Tepeat- 背景 图 像 将 在 垂直 方向 重复 
no-repeat 背景 图 像 将 仅 显 示 一 次 
inherit 规定 应 该 从 父 元 素 继承 background-repeat 属性 的 设置 
背景 定位 


利用 background-position 属性 改变 图 像 在 背景 中 的 位 置 。 为 background-position 属性 
提供 值 有 很 多 种 方法 ， 一 种 是 使 用 位 置 关 键 字 ， 如 top、bottom、left、right 和 center; 另 
一 种 是 使 用 百分数 值 ， 还 有 一 种 是 使 用 准确 的 像素 来 描述 位 置 。 具 体 如 表 2-3 所 示 。 


表 2-3 背景 定位 


表示 


ee 取 值 


说 明 


top left、t ter 、 ight 
SE he 如 果 仅 使 用 一 个 关键 词 ， 那 么 第 二 个 值 默认 为 


center 


关键 字 | center left、center center、center right 


bottom left、bottom center、bottom right 


第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 左 
上 角 是 0% 0%。 右 下 角 是 100% 100%。 如 果 仅 
使 用 一 个 值 ， 另 一 个 值 默认 为 50% 


x% y% 


bv 
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续 表 
方法 | 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 
位 置 左上 角 是 0 0。 单 位 是 像素 (Opx 0px) 或 任何 其 他 
描述 的 CSS 单位 。 如 果 仅 使 用 一 个 值 ， 另 一 个 值 默 
认为 50%。 可 以 混合 使 用 % 和 position 值 
5， 背 景 关联 
如 果 文 档 比 较 长 ， 那 么 当 文 档 向 下 滚动 时 ， 背 景 图 像 也 会 随 之 滚动 。 当 文档 滚动 到 超 


过 图 像 的 位 置 时 ， 图 像 就 会 消失 。 

可 以 通过 background-attachment 属性 防止 这 种 滚动 。 通 过 这 个 属性 ， 可 以 声明 图 像 相 
对 于 可 视 区 是 固定 的 (fixed)， 因 此 不 会 受到 滚动 的 影响 。 该 属性 的 可 取 值 及 其 说 明 如 表 2-4 
所 示 。 


表 2-4 背景 关联 


scroll 随 着 页 面 的 滚动 背景 图 片 将 移动 


随 着 页 面 的 滚动 背景 图 片 不 会 移动 


background-attachment 属性 的 默认 值 是 scroll， 也 就 是 说 ， 在 默认 情况 下 ， 背 景 会 随 文 
档 滚 动 。 

【 例 2.4】 

创建 页 面 并 Pera 设置 表格 为 - 行 三 列 的 表格 ， 为 其 3 个 单元 格 设置 相同 的 
和 使 用 不 同 的 背景 设置 ， 步 又 如 下 。 

定义 3 个 单元 格 的 样式 ， 代码 如 


<style type="text/css"> 
Ed 
height: 200px; 
width: 200px; 
background-color: green; 
} 
.auto-stylel { 
background-image: url('Images/tutu.jpg'); 
} 
-auto-style2 { 
background-image: url('Images/tutu.jpg'); 
background-repeat: no-repeat; 
background-position: 50%; 
} 
-auto-style3 { 
background-image: url('Images/tutu.jpg'); 
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background-position: bottom right; 


} 


by 
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</style> 
国 轨 02| 向 页 面 添加 表格 ， 并 引用 上 述 样式 ， 代 码 如 下 : 
<table> 

E> 


<td class="auto-stylel"></td> 

<td class="auto-style2"></td> 

<td class="auto-style3"></td> 
WE 
</table> 


运行 上 述 代码 ， 其 效果 如 图 2-4 所 示 。 


| localhost3196/Hmbpag x WE 


| € 3 © 0 localhost3196/Htmlpage24.htmi 


图 2-4 使 用 背景 样式 


如 图 2-4 所 示 ， 表 格 中 的 3 个 单元 格 使 用 了 相同 的 区 域 大 小 和 相同 的 背景 图 片 ， 但 显 


示 效 果 不 同 。 
@ 第 一 个 单元 格 使 用 默认 设置 ， 图 片 靠 左 上 和 角 显 示 ， 在 超出 背景 图 片 的 空间 ( 右 侧 和 
下 方 ) 有 图 片 的 重复 。 


e@ 第 二 个 单元 格 使 用 了 不 重复 样式 和 图 片 居中 样式 ， 图 片 显示 在 该 单元 格 的 中 间 位 
置 。 超 出 图 片 的 空间 是 空白 的 ， 其 空白 区 域 将 显示 该 区 域 的 背景 色 。 
®@ ”第 三 个 单元 格 使 用 了 图 片 靠 右 下 显示 ， 该 单元 格 中 左 侧 和 上 方 有 图 片 的 重复 。 


2.4.3 几 文本 样式 


CSS 文本 属性 可 定义 文本 的 外 观 ， 包 括 文本 的 对 齐 方式 、 缩 进 、 字 间隔 、 字 符 间 隔 、 
字符 转换 和 文本 装饰 等 。 

1. 缩 进 文本 

把 Web 页 面 上 的 段落 的 第 一 行 缩 进 ， 这 是 一 种 最 常用 的 文本 格式 化 效果 。CSS 提供 了 
text-indent 属性 ， 可 以 方便 地 实现 文本 缩 进 。 

通过 使 用 text-indent 属性 ， 所 有 元 素 的 第 一 行 都 可 以 缩 进 一 个 给 定 的 长 度 ， 甚 至 该 长 
度 可 以 是 负 值 。 其 可 能 取 值 如 下 所 示 : 
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e@ 固定 的 缩 进 ， 默 认 值 为 0。 

@ 百分比 缩 进 ， 定 义 基 于 父 元 素 宽度 的 百分比 的 缩 进 。 

@ inherit， 规 定 从 父 元 素 继承 text-indent 属性 的 值 。 

text-indent 还 可 以 设置 为 负 值 。 利 用 这 种 技术 ， 可 以 实现 很 多 有 趣 的 “悬挂 缩 进 ”， 
即 第 一 行 悬 挂 在 元 素 中 余下 部 分 的 左边 。 

不 过 ， 如 果 对 一 个 段落 设置 了 负 值 ， 那 么 首 行 的 某 些 文本 可 能 会 超出 浏览 器 窗口 的 左 
边界 。 

为 了 避免 出 现 这 种 显示 问题 ， 建 议 针 对 负 缩 进 再 设置 一 个 外 边 距 或 一 些 内 边 距 。 


bE 一 般 来 说 ， 可 以 为 所 有 块 级 元 素 应 用 text-indent， 但 无 法 将 该 属性 应 用 于 
行内 元 素 ， 图 像 之 类 的 替换 元 素 上 也 无 法 应 用 text-indent 属性 。 如 果 一 个 块 级 元 素 (比如 
段落 ) 的 首 行 中 有 一 个 图 像 ， 它 会 随 该 行 的 其 余 文 本 移动 。 


2.， 对齐 方式 

定义 文本 的 对 齐 方式 使 用 text-align 属性 ， 该 属性 定义 文本 的 水 平 对 齐 方式 ， 其 默认 值 
是 left( 左 对 齐 )。text-align 属性 的 取 值 包括 左 对 齐 、 右 对 齐 、 居 中 对 齐 和 两 端 对 齐 ， 具 体 如 
下 所 示 。 
left: 把 文本 排列 到 左边 。 
right: 把 文本 排列 到 右边 。 
center: 把 文本 排列 到 中 间 。 
justify: 实现 两 端 对 齐 文本 的 效果 。 

e@ inherit， 规 定 从 父 元 素 继承 text-align 属性 的 值 。 

将 块 级 元 素 或 表 元 素 居 中 ， 要 通过 在 这 些 元 素 上 适当 地 设置 左 、 右 外 边 距 来 实现 。 

值 justify 可 以 使 文本 的 两 端 都 对 齐 。 在 两 端 对 齐 文本 中 ， 文 本 行 的 左右 两 端 都 放 在 父 
元 素 的 内 边界 上 。 然 后 ， 调 整 单词 和 字母 间 的 间隔 ， 使 各 行 的 长 度 恰好 相等 。 

两 端 对 齐 文本 在 打印 领域 很 常见 。 通 常 由 用 户 浏览 器 (而 不 是 CSS) 来 确定 两 端 对 齐 文 
本 如 何 拉 伸 ， 以 填 满 父 元 素 左右 边界 之 间 的 空间 。 
当前 浏览 器 中 ， 有 些 浏览 器 可 能 只 在 单词 之 间 增 加 额外 的 空间 ， 而 另外 一 些 浏览 器 可 
能 会 平均 分 布 字母 间 的 额外 空间 。 还 有 一 些 用 户 浏览 器 可 能 会 减少 某 些 行 的 空间 ， 使 文本 
挤 得 更 紧密 。 所 有 这 些 做 法 都 会 影响 元 素 的 外 观 ， 甚 至 改变 其 高 度 ， 这 取决 于 用 户 浏 览 
的 对 齐 选择 影响 了 多 少 文本 行 。 

CSS 规 范 特 别 指出 ， 如 果 letter-spacing 属 性 (定义 字母 间隔 ) 指 定 为 一 个 长 度 值 ， 那 么 用 
户 浏览 器 不 能 进一步 增加 或 减少 字符 间 的 空间 。 

CSS 中 没有 指定 应 当 如 何 处 理 连 字符 (-)。 大 多 数 两 端 对 齐 文本 都 使 用 连 字 符 将 长 单词 
分 开放 在 两 行 上 ， 从 而 缩小 单词 之 间 的 间隔 ， 改 善文 本 行 的 外 观 。 

不 过 ， 由 于 CSS 没有 定义 连 字 符 行 为 ， 所 以 用 户 浏览 器 不 能 自动 添加 连 字 符 。 因 此 ， 
在 CSS 中 ， 两 端 对 齐 文本 看 上 去 没有 打印 出 来 的 好 看 ， 特 别 是 元 素 可 能 太 窗 ， 以 至 于 每 行 
只 能 放下 几 个 单词 。 


3. 字 间隔 

字 间 隔 属性 可 以 改变 汉字 或 单词 之 间 的 间隔 ， 其 属性 名 称 为 word-spacing。 该 属性 有 
3 种 取 值 : normal、 数 值 和 inherit。normal 是 单词 间 的 标准 间隔 ， 是 该 属性 的 默认 值 。 

word-spacing 属性 接受 一 个 正 长 度 值 或 负 长 度 值 。 如 果 提 供 一 个 正 长 度 值 ， 那 么 字 之 
间 的 间隔 就 会 增加 。 为 word-spacing 设置 一 个 负 值 ， 会 把 间隔 拉 近 。 

所 有 浏览 器 都 支持 word-spacing 属性 ， 但 是 任何 版 本 的 正 (包括 正 8) 都 不 支持 属性 值 
inherit。 

CSS 把 “ 字 (word)” 定 义 为 任何 非 空白 字符 组 成 的 串 ， 并 由 某 种 空白 字符 包围 。 这 个 
定义 没有 实际 的 语义 ， 它 只 是 假设 一 个 文档 包含 由 一 个 或 多 个 空白 字符 包围 的 字 。 支 持 
CSS 的 用 户 浏览 器 不 一 定 能 确定 一 个 给 定语 言 中 哪些 是 合法 的 字 ， 而 哪些 不 是 。 

尽管 这 个 定义 没有 多 大 价值 ， 不 过 它 意味 着 采用 象形 文字 的 语言 或 非 罗 马 书 写 体 往往 
无 法 指定 字 间 隔 。 

4. 字符 间隔 

word-spacing 属性 定义 字 间 隔 ， 而 letter-spacing 属性 定义 字符 间隔 。 与 word-spacing 
的 区 别 在 于 ， 字 符 间 隔 修改 的 是 字符 或 字母 之 间 的 间隔 。 

与 word-spacing 属性 一 样 ，letter-spacing 属性 的 可 取 值 包括 所 有 长 度 。 默 认 值 是 
normal。 输 入 的 长 度 值 会 使 字母 之 间 的 间隔 增加 或 减少 指定 的 量 。 

letter-spacing 属性 的 使 用 与 word-spacing 完全 一 样 ， 只 是 针对 的 对 象 不 同 ， 其 使 用 方 
式 和 可 取 的 值 参考 word-spacing 属性 。 

5. 字符 转换 

text-transform 属性 处 理 文本 的 大 小 写 。 这 个 属性 有 5 个 可 取 的 值 ， 如 下 所 示 。 

@ none: 默认 。 定 义 带 有 小 写字 母 和 大 写字 母 的 标准 的 文本 。 

@ capitalize: 文本 中 的 每 个 单词 以 大 写字 母 开 头 。 

@ ”uppercase: 定义 仅 有 大 写字 母 。 

@ ”lowercase: 定义 无 大 写字 母 ， 仅 有 小 写字 母 。 

@ inherit: 规定 从 父 元 素 继承 text-transform 属性 的 值 。 

默认 值 none 对 文本 不 做 任何 改动 ， 将 使 用 源 文档 中 的 原 有 大 小 写 。 顾 名 思 义 ， 
uppercase 和 lowercase 将 文本 转换 为 全 大 写 和 全 小 写字 符 。 最 后 ，capitalize 只 对 每 个 单词 
的 首 字母 大 写 。 

作为 一 个 属性 ，text-transform 可 能 无 关 紧 要 ， 不 过 如 果 要 把 所 有 hl 元 素 变 为 大 写 ， 
这 个 属性 就 很 有 用 。 不 必 单 独 地 修改 所 有 hl 元 素 的 内 容 ， 只 需 使 用 text-transform 为 你 完 
成 这 个 修改 。 

使 用 text-transform 有 两 方面 的 好 处 。 首 先 ， 只 需 写 一 个 简单 的 规则 来 完成 这 个 修改 ， 
而 无 须 修 改 hl 元 素 本 身 。 其 次 ， 如 果 以 后 决定 将 所 有 大 小 写 再 切换 为 原来 的 大 小 写 ， 可 
以 更 容易 地 完成 修改 。 
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6. 文本 装饰 


文本 修饰 属性 text-decoration 是 一 个 有 趣 的 属性 ， 该 属性 提供 了 多 个 有 趣 的 行为 ， 其 
可 取 值 如 下 所 示 。 

@ none: 默认 。 定 义 标准 的 文本 。 
underline: 定义 文本 下 的 一 条 线 。 
overline: 定义 文本 上 的 一 条 线 。 
line-through: 定义 穿 过 文本 下 的 一 条 线 。 
blink: 定义 闪烁 的 文本 。 
inherit: 规定 从 父 元 素 继承 text-decoration 属性 的 值 。 

underline 会 对 元 素 加 下 划 线 ， 就 像 HTML 中 的 U 元 素 一 样 。overline 的 作用 恰好 相 
反 ， 会 在 文本 的 顶端 画 一 个 上 划 线 。 值 line-through 则 在 文本 中 间 画 一 个 贯穿 线 ， 等 价 于 
HTML 中 的 S 和 strike 元 素 。blink 会 让 文本 闪烁 ， 类 似 于 Netscape 支持 的 blink 标记 。 


上 贱 注意 : IE、Chrome 和 Safari 不 支持 blink 属性 值 。 

none 值 会 关闭 原本 应 用 到 一 个 元 素 上 的 所 有 装饰 。 通 常 ， 无 装饰 的 文本 是 默认 外 观 ， 
但 也 不 总 是 这 样 。 

例如 ， 链 接 默 认 地 会 有 下 划 线 。 如 果 希 望 去 掉 超 链接 的 下 划 线 ， 可 以 显 式 地 使 用 text- 
decoration 属性 去 掉 链 接 的 下 划 线 ， 还 需要 注意 链接 文字 的 颜色 。 链 接 文字 的 颜色 通常 与 
正文 颜色 不 同 。 

如 果 使 用 两 个 不 同 的 装饰 来 匹配 同一 元 素 ， 那 么 优先 级 高 的 属性 值 会 完全 取代 另 一 个 
值 。 因 为 text-decoration 值 是 蔡 换 而 不 是 累积 起 来 。 

7， 处 理 空白 符 


white-space 属性 会 影响 到 用 户 对 源 文档 中 空格 、 换 行 和 Tab 字符 的 处 理 。 通 过 使 用 该 
属性 ， 可 以 影响 浏览 器 处 理 字 之 间 和 文本 行 之 间 的 空白 符 的 方式 。white-space 属性 的 可 取 
值 如 下 所 示 。 

@ normal: 默认 。 空 白 会 被 浏览 器 忽略 。 

@ pre: 空白 会 被 浏览 器 保留 。 其 行为 方式 类 似 于 HTML 中 的 <pre> 标 记 。 

@ nowrap: 文本 不 会 换行 ， 文 本 会 在 同一 行 上 继续 ， 直 到 遇 到 <br> 标 记 为 止 。 

@ ”pre-wrap: 保留 空白 符 序列 ， 但 是 正常 地 进行 换行 。 

@ ”pre-line: 合并 空白 符 序 列 ， 但 是 保留 换行 符 。 

e@ ”inherit: 规定 应 该 从 父 元 素 继承 white-space 属性 的 值 。 

如 果 将 white-space 设置 为 pre， 受 这 个 属性 影响 的 元 素 中 ， 空 白 符 的 处 理 就 像 
XHTML 的 pre 元 素 一 样 ， 空 白 符 不 会 被 忽略 。 

从 某 种 程度 上 讲 ， 默 认 的 XHTML 处 理 已 经 完成 了 空白 符 处 理 : 把 所 有 空白 符合 并 为 
一 个 空格 。 文 本 在 Web 浏览 器 中 显示 时 ， 各 个 字 之 间 只 会 显示 一 个 空格 ， 同 时 忽略 元 素 中 
的 换行 。 


此 注意 : 经 测试 ，IE7 以 及 更 早 版 本 的 浏览 器 不 支持 pre 属性 值 ， 因 此 应 使 用 其 他 
浏览 器 来 验证 该 属性 值 的 显示 效果 。 

与 pre 属性 值 相对 的 值 是 nowrap， 它 会 防止 元 素 中 的 文本 换行 ， 除 非 使 用 了 一 个 tr 元 
素 。 在 CSS 中 使 用 nowrap 非常 类 似 于 HIML4 中 用 <tdnowrap> 将 一 个 表单 元 格 设置 为 不 
能 换行 ， 不 过 white-space 值 可 以 应 用 到 任何 元 素 。 

CSS 2.1 引入 了 值 pre-wrap 和 pre-line， 这 在 以 前 版 本 的 CSS 中 是 没有 的 。 这 些 值 的 作 
用 是 允许 创作 人 员 更 好 地 控制 空白 符 处 理 。 

如 果 元 素 的 white-space 设置 为 pre-wrap， 那 么 该 元 素 中 的 文本 会 保留 空白 符 序列 ， 但 
是 文本 行 会 正常 地 换行 。 如 果 设 置 为 这 个 值 ， 源 文本 中 的 行 分 隔 符 以 及 生成 的 行 分 隔 符 也 
会 保留 。 

pre-line 与 pre-wrap 相反 ， 会 像 正 常 文本 中 一 样 合并 空白 符 序 列 ， 但 保留 换行 符 。 

8， 文 本 方向 

如 果 阅 读 的 是 英文 书籍 ， 就 会 从 左 到 右 、 从 上 到 下 地 阅读 ， 这 就 是 英文 的 流 方向 。 不 
过 ， 并 不 是 所 有 语言 都 如 此 。 我 们 知道 古 汉语 就 是 从 右 到 左 来 阅读 的 ， 当 然 还 包括 希 伯 来 
语 和 阿拉 伯 语 等 。CSS 引入 了 direction 属性 来 描述 其 方向 性 。 

direction 属性 影响 块 级 元 素 中 文本 的 书写 方向 、 表 中 列 布局 的 方向 、 内 容 水 平 填充 其 
元 素 框 的 方向 ， 以 及 两 端 对 齐 元 素 中 最 后 一 行 的 位 置 。 

direction 属性 有 3 个 值 ， 如 下 所 示 。 

@ ltr: 默认 。 文 本 方向 从 左 到 右 。 

e@ rtl; 文本 方向 从 右 到 左 。 

@ inherit: 规定 从 父 元 素 继承 direction 属性 的 值 。 

【 例 2.S】 

创建 页 面 并 添加 表格 元 素 ， 设 置 表格 为 两 行 三 列 的 表格 。 其 中 首 行为 标题 行 ， 只 有 中 
间 的 单元 格 有 文本 “白居易 ”。 第 二 行 有 3 个 单元 格 ， 分 别 添 加 白居易 的 3 首 诗词 。 设 置 
这 4 个 单元 格 的 文本 样式 ， 查 看 显示 效果 ， 步 骤 如 下 。 

首先 设置 单元 格 的 样式 ， 定 义 标题 行 字 间 距 为 lem， 并 使 字体 居中 显示 ， 

代码 如 下 : 


<style type="text/css"> 
-EAL { 
letter-spacing: lem; 
text-align: center; 
b 
</style> 


国 轨 02| 接着 定义 第 二 行 左 侧 的 单元 格 样式 ， 定 义 其 字体 靠 右 显示 ， 并 使 用 white- 
space 属性 保持 文本 原样 输出 ， 代 码 如 下 : 


le 
text-align: right; 
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white-space: pre; 


} 
轿 到 03| 之 后 定义 第 二 行 中 间 的 单元 格 样式 ， 定 义 其 字体 居中 显示 ， 并 使 用 white- 
space 属性 忽略 空格 、 保 留 文 本 换行 ， 同 时 添加 文本 的 下 划 线 ， 代 码 如 下 : 


"Ed3 
text-align: center; 
white-space: pre-line; 
text-decoration: underline; 


} 
定义 最 后 一 个 单元 格 样式 ， 使 其 字体 靠 左 显示 ， 不 定义 其 white-space 属 
性 ， 代 码 如 下 : 


-td4 { 
text-align: left; 
| 
向 页 面 中 添加 表格 ， 引 用 上 述 样式 。 在 添加 白居易 的 诗词 时 ， 左 侧 单元 格 
文本 没有 空格 ， 只 有 换行 ， 中 间 单 元 格 中 的 文本 有 空格 和 换行 ， 右 侧 单 元 格 中 的 
文本 有 空格 和 换行 ， 代 码 如 下 : 
<table> 
<EP> 
<td>gnbsp; </td> 
<td class="td1"> 白 居 易 </td> 
<td>gnbsp; </td> 
</Er> 
ET 
<td class="td2"> 
离 离 原 上 草 ， 一 岁 一 枯 荣 。 
野火 烧 不 尽 ， 春 风 吹 又 生 。 
远 芳 侵 古 道 ， 畏 浴 接 匾 城 。 
又 送 王 孙 去 ， 萎 萎 满 别 情 。 
</td> 
<td class="td3"> 
帝 城 春 欲 昔 ， 喧 喧 车 马 度 。 
共 道 牡丹 时 ， 相 随 买 花 去 。 
贵贱 无 常 价 ， 酬 直 看 花 数 : 
灼 灼 百 条 红 ， 戈 戈 五 束 素 。 
</td> 
<td class="td4"> 
江南 好 ， 风 景 旧 曾 请。 
日 出 江 花红 胜 火 ， 春 来 江水 绿 如 蓝 ， 
能 不 忆 江 南 ? 
</td> 
</tr> 
</table> 


上 述 代 码 的 执行 效果 如 图 2-5 所 示 。 注 意 到 中 间 单 元 格 中 的 文本 被 去 除了 空格 ， 右 侧 
单元 格 中 的 文本 根据 单元 格 的 宽度 被 换行 ， 而 不 是 根据 代码 中 的 换行 而 换行 。 
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远东 仿古 道 ， 睛 池 接 秀城 。 医 澡 和 晤 针 ， 各 时 和 折 条 如 生性 人 入 党 来 江水 入 如 草 ， 
双关 王孙 去 ， 要 要 江 别 情 。 接 村 玫 天价 ， 量 训 和 从 各 能 不 江南? 


2-5 ”使 用 文本 样式 


2.4.4 字体 样式 


设置 字体 属性 是 样式 表 的 最 常见 的 用 途 之 一 。 不 过 ， 尽 管 字体 选择 很 重要 ， 但 是 目前 
还 没有 一 种 办 法 能 确保 在 Web 上 一 致 地 使 用 字体 ， 因 为 没有 一 种 统一 描述 字体 和 字体 变形 
的 方法 。 在 CSS 中 ， 有 两 种 不 同类 型 的 字体 系列 ， 如 下 所 示 : 

e@ 通用 字体 系列 拥有 相似 外 观 的 字体 系统 组 合 (比如 Serif 或 Monospace)。 

e@ ”特定 字体 系列 具体 的 字体 系列 (比如 Times 或 Courier)。 

除 各 种 特定 的 字体 系列 外 ，CSS 还 定义 了 5 种 通用 字体 系列 : Serif 字体 、Sans-serif 
字体 、Monospace 字体 、Cursive 字体 和 Fantasy 字体 。 

字体 系列 Times、Times New Roman 和 TimesNR 可 能 很 类 似 ， 甚 至 完全 相同 。Times 
New Roman 和 TimesNR 实际 上 是 可 以 互 换 的。 但 是 浏览 器 并 不 一 定 采用 哪 种 字体 系列 ， 
因此 在 使 用 字体 样式 的 同时 ， 需 要 设置 字体 系列 。 

与 文字 处 理 软件 相 比 ，CSS 对 字体 并 没有 提供 更 多 的 最 终 控 制 。 比 如 我 们 知道 加 载 一 
个 Microsoft Office 文档 时 ， 其 显示 字体 取决 于 本 机 已 经 安装 的 字体 。 如 果 文 档 字体 与 本 机 
所 安装 的 字体 不 同 ， 那 么 原 有 的 字体 将 被 改变 。 使 用 CSS 设计 的 文档 也 是 如 此 。 

人 们 通常 认为 的 Times 是 所 有 这 些 变形 字体 的 一 个 组 合 。 换 名 话说 ，Times 实际 上 是 
一 个 字体 系列 (Font Family)， 而 不 只 是 单个 的 字体 ， 尽 管 大 多 数 人 都 认为 这 种 字体 就 是 某 
一 种 字体 。 

Times 实际 上 是 多 种 变形 的 一 个 组 合 ， 包 括 TimesRegular、TimesBold、TimesItalic、 
TimesOblique、TimesBoldItalic、TimesBoldOblique 等 。Times 的 每 种 变形 都 是 一 个 具体 的 
字体 风格 (Font Face)。 

CSS 字体 属性 定义 文本 的 字体 系列 、 大 小 、 加 粗 、 风 格 (如 斜体 ) 和 变形 (如 小 型 大 写字 
母 )。 常 用 的 字体 属性 及 其 说 明 如 表 2-5 所 示 。 


表 2-5 字体 样式 
属性 名 称 说 明 
font 简写 属性 。 作 用 是 把 所 有 针对 字体 的 属性 设置 在 一 个 声明 中 
font-family 设置 字体 系列 Wp 8 
font-size 设置 字体 的 尺寸 (YN N 
RN yp 
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续 表 
说 明 
当 首 选 字体 不 可 用 时 ， 对 替换 字体 进行 智能 缩放 (CSS 2.1 已 删除 该 属性 ) 
对 字体 进行 水 平 拉 伸 (CSS 2.1 已 删除 该 属性 ) 


属性 名 称 


font-size-adjust 


font-stretch 


font-style 设置 字体 风格 
font-variant 以 小 型 大 写字 体 或 者 正常 字体 显示 文本 
font-weight 设置 字体 的 粗细 


font 这 个 简写 属性 用 于 一 次 设置 元 素 字 体 的 两 个 或 更 多 方面 。 使 用 icon 等 关键 字 可 以 
适当 地 设置 元 素 的 字体 ， 使 之 与 用 户 计算 机 环境 中 的 某 个 方面 一 致 。 其 所 需要 设置 的 字体 
如 表 2-6 所 示 。 


表 2-6 文本 字体 

字 体 说 明 
caption 定义 被 标题 控件 (比如 按钮 、 下 拉 列 表 等 ) 使 用 的 字体 
icon 定义 被 图 标 标记 使 用 的 字体 
menu 定义 被 菜单 使 用 的 字体 
message-box 定义 被 对 话 框 使 用 的 字体 
small-caption caption 字体 的 小 型 版 本 
status-bar 定义 被 窗口 状态 栏 使 用 的 字体 


在 font 属性 中 设置 字体 样式 ， 如 果 没 有 使 用 表 2-6 中 的 字体 关键 词 ， 至 少 要 指定 字体 
大 小 和 字体 系列 。 

font 属性 能 够 将 表 2-5 中 的 其 他 属性 集合 在 一 起 ， 包 括 字体 风格 、 大 小 和 粗细 等 。 其 
定义 样式 的 顺序 为 font-style 、font-variant 、font-weight 、font-size 、line-height 、font- 
family。 在 介绍 font 属性 定义 字体 样式 之 前 ， 首 先 介绍 这 些 样式 及 其 取 值 。 


1. font-style 


font-style 属性 设置 字体 使 用 和 斜体、 倾斜 或 正常 字体 。 和 斜体 字体 通常 定义 为 字体 系列 中 
的 一 个 单独 的 字体 。 该 属性 的 取 值 及 其 说 明 如 下 所 示 。 

e@ ”normal: 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 。 

@ italic: 浏览 器 会 显示 一 个 斜体 的 字体 样式 。 

@ oblique: 浏览 器 会 显示 一 个 倾斜 的 字体 样式 。 

@ inherit， 规定 应 该 从 父 元 素 继承 字体 样式 。 

如 设置 一 个 div 使 用 字体 为 斜体 的 样式 ， 代 码 如 下 : 

<style type="text/css"> 

div { 
font-style: italic; 


} 
</style> 


2. font-variant 


font-variant 属性 设置 文本 中 大 写字 母 的 小 型 字体 。 通 常 大 写字 母 与 小 写字 母 相 比 ， 除 
了 形态 不 同 ， 其 字体 大 小 也 略 有 不 同 。 

font-variant 属性 设置 小 型 大 写字 母 的 字体 显示 文本 ， 这 意味 着 所 有 的 小 写字 母 均 会 被 
转换 为 大 写 ， 但 是 所 有 使 用 小 型 大 写字 体 的 字母 与 其 余 文 本 相 比 ， 其 字体 尺寸 更 小 。font- 
variant 属性 可 取 值 及 其 说 明 如 下 所 示 。 

e@ normal: 默认 值 。 浏 览 器 会 显示 一 个 标准 的 字体 。 

@ small-caps: 浏览 器 会 显示 小 型 大 写字 母 的 字体 。 

e@ ”inherit 规定 从 父 元 素 继承 font-variant 属性 的 值 。 

3. font-weight 

font-weight 属性 设置 文本 的 粗细 。 该 属性 用 于 设置 显示 元 素 的 文本 中 所 用 的 字体 加 
粗 。 数 值 400 相当 于 关键 字 normal，700 等 价 于 bold。 每 个 数值 对 应 的 字体 加 粗 必 须 至 少 
与 下 一 最 小 数字 一 样 细 ， 且 至 少 与 下 一 最 大 数字 一 样 粗 。 其 属性 值 及 说 明 如 表 2-7 所 示 。 


表 2-7 文本 粗细 
属性 值 说 明 
Dormal 默认 值 。 定 义 标 准 的 字符 
bold 定义 粗 体 字符 
bolder 定义 更 粗 的 字符 
lighter 定义 更 细 的 字符 
100、200、...、900 | 定义 由 粗 到 细 的 字符 。400 等 同 于 normal， 而 700 等 同 于 bold 
inherit 规定 应 该 从 父 元 素 继承 字体 的 粗细 
4. font-size 


font-size 属性 可 设置 字体 的 尺寸 。 该 属性 设置 元 素 的 字体 大 小 ， 实 际 上 它 设置 的 是 字 
体 中 字符 框 的 高 度 ; 所 显示 的 字符 字形 可 能 比 这 些 框 高 或 矮 (通常 会 矮 )。 

font-size 属性 值 关 键 字 对 应 的 字体 必须 比 一 个 最 小 关键 字 相 应 字体 要 高 ， 并 且 要 小 于 
下 一 个 最 大 关键 字 对 应 的 字体 。 其 属性 值 如 表 2-8 所 示 。 


表 2-8 字体 尺寸 


属性 值 说 明 


xx-small 把 字体 的 尺寸 设置 为 不 同 的 尺寸 ， 从 xx-small 到 xx-large 依次 增 大 。 默 认为 medium 
x-small 
small 


medium 
large 
X-large 
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length 把 font-size 设置 为 一 个 固定 的 值 
% 把 font-size 设置 为 基于 父 元 素 的 一 个 百分比 值 
inherit 规定 应 该 从 父 元 素 继承 字体 尺寸 


5. line-height 


line-height 属性 设置 行 间 的 距离 ( 行 高 )， 该 值 不 允许 使 用 负 值 。line-height 属性 会 影响 
行 框 的 布局 。 在 应 用 到 一 个 块 级 元 素 时 ， 它 定义 了 该 元 素 中 基线 之 间 的 最 小 距离 而 不 是 最 
大 距离 。line-height 属性 的 可 取 值 如 下 所 示 。 

@ ”normal: 默认 值 。 设 置 合理 的 行 间 距 。 
number: 设置 数值 ， 此 数值 会 与 当前 的 字体 尺寸 相 乘 来 设置 行 间距 。 
length: 设置 固定 的 行 间距 。 
i 字体 尺寸 的 百分比 行 间距 。 
inherit: 规定 应 该 从 父 元 素 继承 line-height 属性 的 值 。 
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6. font-family 


font-family 规定 元 素 的 字体 系列 。font-family 可 以 把 多 个 字体 名 称 作 为 一 个 “ 回 退 ” 
系统 来 保存 。 如 果 浏 览 器 不 支持 第 一 个 字体 ， 则 会 尝试 下 一 个 。 也 就 是 说 ，font-family 属 
性 的 值 是 用 于 某 个 元 素 的 字体 族 名 称 或 /及 类 族 名 称 的 一 个 优先 表 。 浏 览 器 会 使 用 它 可 识别 
的 第 一 个 值 。 在 定义 时 使 用 逗号 分 割 每 个 值 ， 并 始终 提供 一 个 类 族 名 称 作为 最 后 的 选择 。 

使 用 何 种 特定 的 字体 系列 (Geneva) 完 全 取决 于 用 户 机 器 上 该 字体 系列 是 否 可 用 ; 这 个 


属性 没有 指示 任何 字体 下 载 。 因 此 推荐 使 用 一 个 通用 字体 系列 名 作为 后 路 。 常 见 的 中 文字 
体 名 称 及 其 英文 属性 名 如 表 2-9 所 示 。 
表 2-9 常用 字体 
字体 名 称 属性 值 字体 名 称 属性 值 
华文 楷体 STKaiti 标 楷体 DFKai-SB 
华文 宋体 STSong 黑体 SimHei 
华文 中 宋 STZhongsong 宋体 SimSun 
华文 仿宋 STFangsong 新 宋体 NSimSun 
方正 舒 体 FZShuTi 仿宋 FangSong 
方正 姚 体 FZYaoti 楷体 KaiTi 
华文 彩云 STCaiyun 仿宋 GB2312 FangSong GB2312 
华文 琥珀 STHupo 楷体 GB2312 KaiTi GB2312 
华文 隶书 STLiti 隶书 LiShu 
yg, 


ce 


ta 

第 

DD 

章 

字体 名 称 - 

华文 行 楷 多 

基 

华文 新 魏 础 
7. font 


font 属性 能 够 将 上 述 6 种 属性 结合 在 一 起 ， 如 定义 一 个 div 样式 为 斜体 、 字 体 大 小 为 
16pt、 行 高 为 20pt 的 幼 圆 字体 ， 代 码 如 下 : 
<style type="text/css"> 


好 
font: italic 16pt/20pt YouYuan; 


} 

</style> 

【 例 2.6】 

使 用 例 2.5 中 图 2-5 给 出 的 页 面 ， 修 改 其 单元 格 的 字体 样式 ， 分 别 使 首 行 单元 格 显示 
宋体 、 最 大 字体 、 粗 细 为 500 大 小 ; 末 行 左 侧 单元 格 字 体 为 斜体 ， 末 行 中 间 单元 格 使 用 华 
文 行 楷 字 体 ， 末 行 右 侧 单元 格 使 用 italic、Times 或 serif 红色 字体 ， 字 体 大 小 为 12pt， 行 高 
为 14pt， 步 又 如 下 。 

鸭 罚 01| 修改 首 行 单元 格 显示 宋体 、 最 大 字体 、 粗 细 为 500 大 小 ， 代 码 如 下 : 

<style type="text/css"> 

GT 
letter-spacing: lem; 
text-align: center; 
font-family: SimSun; 
font-size: xx-large; 
font-weight: 500; 


} 


</style> 
修改 其 末 行 左 侧 单元 格 的 字体 为 斜体 ， 代 码 如 下 : 
:td2 { 


text-align: right; 
white-space: pre; 
font-style: italic; 


} 
修改 末 行 中 间 单元 格 使 用 华文 行 档 字体 ， 代 码 如 下 : 


SEOGS 
text-align: center; 
white-space: pre-line; 
text-decoration: underline; 
font-family: STXingkai; 

} 


未 行 右 侧 单元 格 使 用 italic、Times 或 serif 红色 字体 ， 字 体 大 小 为 12pt， 行 
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高 为 14pt。 字 体 颜 色 使 用 color 属性 ， 该 属性 后 面 跟 颜 色 的 英文 或 颜色 标记 。 使 
用 font 属性 一 次 性 定义 ， 代 码 如 下 : 
cad 
text-align: left; 
color: red; 
font: italic 12pt/20pt Times, serif; 
} 


国 玫 05| 运行 上 述 代码 ， 其 效果 如 图 2-6 所 示 。 


了 | localhost3196/Htmlpac x 


| € 3 © [Blocalhost3196/HtmlPage25.html 


白 居 易 


ps TE SY Ftd id 
1 A . J ， 
入 信人 忆 名 六 括 。 共计 生生 让 向 间 基 基本 正 红 双人 闪光 天 闪 各 
LT 船 不作 江 捕 ? 


2-6 ”使 用 字体 样式 


2.4.5 ”链接 样式 


链接 也 是 一 种 文本 ， 可 设置 其 字体 、 颜 色 、 背 景 等 属性 。 但 链接 作为 一 种 超 文 本 ， 有 
着 自己 独特 的 样式 ， 在 CSS 中 根据 链接 的 状态 ， 可 以 将 链接 的 样式 分 为 4 种 ， 如 下 所 示 。 
e@ alink: 普通 的 、 未 被 访问 的 链接 。 
e@ ”aivisited: 用 户 已 访问 的 链接 。 
e@ a:hover: 鼠标 指针 位 于 链接 的 上 方 。 
e@ “aactive: 链接 被 点 击 的 时 刻 。 
上 述 4 种 状态 的 样式 需要 独立 设置 ， 但 为 链接 的 不 同 状态 设置 样式 时 ， 需 要 按照 以 下 
次 序 规则 : 
@ a:hover 必须 位 于 a:link 和 a:visited 之 后 。 
@ “aiactive 必须 位 于 ahover 之 后 。 
【 例 2.7】 
创建 页 面 并 添加 4 个 链接 ， 分 别 使 用 不 同样 式 定义 链接 的 各 种 状态 ， 步 又 如 下 。 
首先 定义 链接 的 4 种 样式 ， 定 义 初始 状态 下 链接 字体 为 黑色 ， 定 义 已 经 访 
问 过 的 链接 字体 颜色 为 红色 ; 定义 鼠标 移动 到 链接 上 方 时 ， 链 接 背 景色 为 
#89D4F4; 定义 单 击 链接 时 ， 字 体 颜色 为 蓝 色 。 代 码 如 下 : 
<style type="text/css"> 
a:link { 
Color: Dlack 


} 


a:visited { 


color: red; 


} 


a:hover { 


background-color: #89D4F4; 


上 
a:active { 
color: blue; 


} 


</style> 


向 页 面 的 body 元 素 下 添加 标题 ， 定 义 body 元 素 中 的 文本 居中 显示 ， 并 添 
加 4 个 链接 ， 如 下 所 示 : 


<body style="text-align:center"> 
<h2><a href="http://zz.meituan.com/"> 美 团 网 </a></h2> 
<h2><a href="http://zz.nuomi .com/"> 糯 米 网 </a></h2> 

<h2><a href="http://www.lashou.com/"> 拉 手 网 </a></h2> 
<h2><a href="http://bj.jumei .com/"> 聚 美 优 品 </a></h2> 
</body> 


运行 上 述 代码 ， 并 将 鼠标 放 在 “ 美 团 网 ”链接 处 ， 观 察 该 链接 有 了 背景 
色 ， 如 图 2-7 所 示 ; 单 击 “ 糯 米 网 ”链接 后 再 返回 该 页 面 ， 其 “糯米 网 ”链接 显 
示 红 色 字 体 ， 如 图 2-8 所 示 ; 将 鼠标 放 在 “拉手 网 ”链接 处 并 单 击 ， 其 样式 效果 


如 图 2-9 所 示 。 


6 Dt S| 
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2-7 ”链接 访问 前 


2.4.6 列表 样式 


列表 是 一 种 排列 有 序 的 文本 ， 除 了 可 以 根据 文本 样式 和 字体 样式 来 设置 列表 的 样式 ， 
列表 还 有 着 独立 的 样式 设置 ， 如 下 所 示 。 
list-style: 简写 属性 。 把 所 有 用 于 列表 的 属性 设置 于 一 个 声明 中 。 
list-style-image: 将 图 像 设置 为 列表 项 标志 。 


上 述 语句 中 ，listrstyle 与 其 他 属性 之 间 的 关系 相当 于 font 与 font-style、font-variant、 


list-style-position: 设置 列表 中 列表 项 标志 的 位 置 。 


| + 3 CDlocalw|s 


美 团 网 


2-8 ”链接 访问 后 


list-style-type: 设置 列表 项 标志 的 类 型 。 


Nx 
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2-9 ”链接 访问 时 


font-weight、font-size、line-height、font-family 等 属性 之 间 的 关系 。 


CD 
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1. list-style-type 
list-style-type 属性 定义 列表 的 标志 类 型 。 
(marker) 是 出 现在 各 列表 项 旁边 的 圆 点。 在 有 序列 表 中 ， 标 志 
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例如 ， 在 一 个 无 序列 表 中 ， 列 表 项 的 标志 
可 能 是 字母 、 数 字 或 另外 某 


种 计数 体系 中 的 一 个 符号 。 
list-style-type 能 够 修改 用 于 列表 项 的 标志 类 型 ， 其 属性 值 如 表 2-10 所 示 。 


表 2-10 列表 标志 类 型 


属性 值 说 明 
none 无 标记 
disc 默认 。 标 记 是 实心 圆 
circle 标记 是 空心 圆 
square 标记 是 实心 方块 
decimal 标记 是 数字 


decimal-leading-zero 
lower-roman 
upper-roman 
lower-alpha 
Upper-alpha 
lower-ereek 
lower-latin 
upper-latin 
hebrew 
armenian 
georgian 
cjk-ideographic 


0 开头 的 数字 标记 (01、02、03 等 ) 
小 写 罗马 数字 (i、 二 、 二 、iv、v 等 ) 

大 写 罗 马 数字 (、I、IE、IV、V 等 ) 
小 写 英文 字母 (a、b、c、d、e 等 ) 

大 写 英文 字母 (A、B、C、D、EE 等 ) 
小 写 希 腊 字 母 (alpha、beta、gamma 等 ) 
小 写 拉 丁字 母 

大 写 拉 丁字 母 

传统 的 希 伯 来 编号 方式 
传统 的 亚美尼亚 编号 方式 
传统 的 乔治 亚 编号 方式 (an、ban、gan 等 ) 
简单 的 表意 数字 


hiragana 标记 是 a、i、u、e、o、ka、ki 等 (日 文 片 假名 ) 

katakana 标记 是 A、I、U、E、O、KA、KI 等 (日 文 片 假名 ) 
hiragana-iroha 标记 是 i、ro、ha、ni、ho、he、to 等 (日 文 片 假名 ) 
katakana-iroha 标记 是 I、RO、HA、NI、HO、HE、TO 等 (日 文 片 假名 ) 


如 定义 无 序列 表 的 列表 项 标志 ， 设 置 为 方块 ， 代 码 如 下 


1 


list-style-type: 


} 


2. list-style-image 


x 有 时 并 不 外 


常规 的 标志 


square 


起 满足 用 户 的 需求 ， 人 们 更 希望 使 用 图 片 (如 图 标 ) 来 作为 列表 的 


标志 ， 此 时 可 以 使 用 CSS 中 的 list-style-image 属性 。 


该 属性 可 使 用 图 片 的 地 址 作为 属性 值 ， 在 执行 时 ， 将 图 片 作 为 列表 标志 来 显示 。 如 定 
义 列 表 的 标志 图 片 为 xxx.gif， 语 法 如 下 : 


a 
list-style-image: url (xxx.gif) 


DY 
吝 币 SSO 山 z 泊 


} 


3. list-style-position 


list-style-position 属性 用 于 声明 列表 标志 相对 于 列表 项 内 容 的 位 置 ， 其 可 取 值 如 下 。 

@ ”inside: 列表 项 目标 记 放 置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 。 

@ outside: 默认 值 。 保 持 标记 位 于 文本 的 左 侧 。 列 表 项 目标 记 放 置 在 文本 以 外 ， 且 
环绕 文本 不 根据 标记 对 齐 。 

@ ”inherit 规定 应 该 从 父 元 素 继承 list-style-position 属性 的 值 。 


4. list-style 


为 简单 起 见 ， 可 以 将 以 上 3 个 列表 样式 属性 合并 为 一 个 方便 的 属性 :list-style。 
list-style 属性 是 一 个 简写 属性 ， 涵 盖 了 所 有 其 他 列表 样式 属性 。 由 于 它 应 用 到 所 有 
display 为 list-item 的 元 素 ， 所 以 在 普通 的 HTML 和 XHTML 中 只 能 用 于 二 元 素 ， 不 过 实际 
上 它 可 以 应 用 到 任何 元 素 ， 并 由 list-item 元 素 继承 。 
list-style 的 值 可 以 按 任何 顺序 列 出 ， 而 且 这 些 值 都 可 以 忽略 。 只 要 提供 了 一 个 值 ， 其 
他 的 就 会 填 入 其 默认 值 。 语 法 如 下 所 示 : 
站 a url (example.gif) square inside 
} 
【 例 2.8】 
创建 页 面 ， 添 加 一 个 两 行 三 列 的 表格 ， 其 内 容 与 例 2.5 相似 。 在 第 一 行 中 间 的 单元 格 
有 文本 “白居易 ”; 在 第 二 行 的 3 个 单元 格 中 添加 白居易 的 3 首 诗词 ， 但 这 3 首 诗词 以 列 
表 的 样式 来 号 ， 并 为 这 3 首 诗词 定义 不 同 的 列表 样式 ， 步 又 如 下 。 
国 吕 01| 定义 3 个 列表 样式 ， 分 别 定义 第 1 个 为 空心 圆 点 标志 ; 第 2 个 使 用 图 片 标 
志 ; 第 3 个 设置 列表 项 目标 记 放置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 ， 代 码 
如 下 : 


<style type="text/css"> 
hr 
list-style-type: circle; 
} 
人 
list-style-image: url('Images/ul.jpg'); 
hn 
Sl 
list-style-position: inside; 
p 
</style> 
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国 轨 02| 修改 例 2.5 中 的 代码 ， 使 其 中 的 诗词 部 分 以 列表 的 形式 呈现 ， 代 码 如 下 : 


<table> 
Er> 
<td>gnbsp; </td> 
<tqd class="td1"> 白 居 易 </td> 
<td>gnbsp; </td> 
</ErS 
Er 
<td class="td2"> 
<ul class="ull"> 
<1i> 离 离 原 上 草 ， 一 岁 一 村 荣 。</1i> 
<1i> 野 火烧 不 尽 ， 春 风 吹 又 生 。</1i> 
<1i> 远 芳 侵 古道 ， 畏 丙 接 荒 城 。</1i> 
<1i> 又 送 王孙 去 ， 萎 萎 满 别 情 。</1i> 
</ul> 
</td> 
<td class="td3"> 
<ul class="ul12"> 
<1i> 帝 城 春 欲 著 ， 哈 喧 车 马 度 。</1i> 
<1i> 共 道 牡丹 时 ， 相 随 买 花 去 。</1i> 
<1i> 贵 贱 无 常 价 ， 酬 直 看 花 数 : </1i> 
<1i> 灼 灼 百 条 红 ， 臣 起 五 束 素 。</1i> 
</ul> 
</td> 
<td class="td4"> 
<ul class="ul3"> 
<1i> 江 南 好 ， 风 景 旧 曾 详 。</1i> 
<1i> 日 出 江 花红 胜 火 ， 春 来 江水 绿 如 蓝 ，</1i> 
<1i> 能 不 忆 江南 ? 
</1i> 


</table> 
妇 凡 03| 运行 上 述 代码 ， 执 行 效果 如 图 2-10 所 示 。 


1 1 localhost3196/Htmlpag x 
€ 2 © [Dlocalhost:3196/HtmlPage26.html 


白居易 用 
。 离 高 原 上 草 ， 一 岁 一 村。 W 帝 城 春 僻 莫 ， 喧 喀 车 马 
。 要 六 找 不 尽 ， 春 风 芍 又 。 共 省 牡丹 时 ， 相 随 习 花 。 江南 籽 ， 风 县 旧 曾 详 。 
。 表 委 人 吉首 ， 哺 接 芒 。。 V 去 训 无 常 价 ,本 看 花 人 
扰 ,部 不 亿 并 商 ? 


。 基 这 3 去， 要 要 少 |。W 榴 9 本 4 红 ,二 和 
Rs 


图 2-10 使 用 列表 样式 


2.4.7 表格 和 轮廓 


表格 与 div 一 样 ， 也 是 一 种 容器 ， 可 以 添加 标题 、 段 落 、 文 本 和 列表 等 。 因 此 表格 的 
样式 可 以 根据 文本 样式 、 字 体 样式 、 背 景 样式 等 来 设置 。 本 节 介 绍 表格 中 的 特有 样式 ， 如 
表格 的 边 距 、 单 元 格 的 算法 、 单 元 格 合并 等 。 

表格 是 可 以 有 轮廓 的 ， 不 只 是 表格 ，div 元 素 也 有 轮廓 。 本 节 除 了 介绍 表格 的 样式 ， 
还 将 介绍 轮廓 的 样式 ， 包 括 轮 廓 的 元 素 、 宽 度 和 样式 等 。 


1， 表格 的 边框 


表格 的 边框 与 轮廓 在 样式 设置 方面 相似 ， 但 表格 的 边框 和 轮廓 是 不 同 的 概念 。 边 框 是 
表格 内 部 分 离 各 个 单元 格 的 线 ， 而 轮廓 是 所 有 元 素 都 可 以 有 的 、 分 布 在 元 素 周 围 的 线 。 

表格 的 边框 使 用 border 属性 ， 可 设置 边框 的 宽度 、 样 式 和 颜色 。 由 于 table、tr 以 及 td 
元 素 都 有 独立 的 边框 ， 因 此 若 同 时 为 这 3 个 元 素 设置 边框 ， 将 出 现 单元 格 周围 有 多 条 边框 
的 现象 ， 如 果 需 要 把 表格 显示 为 单线 条 边框 ， 需 要 使 用 border-collapse 属性 进行 设置 。 

border-collapse 属性 设置 是 否 将 表格 边框 折 车 为 单一 边框 ， 有 以 下 几 个 属性 值 。 

@ ”separate: 默认 值 。 边 框 会 被 分 开 。 不 会 忽略 border-spacing 和 empty-cells 属性 。 

@ collapse: 如 果 可 能 ， 边 框 会 合并 为 一 个 单一 的 边框 。 会 忽略 border-spacing 和 

empty-cells 属性 。 

边框 的 设置 有 以 下 几 个 独立 的 属性 ， 通 过 border 属性 可 将 下 列 独立 的 属性 集合 在 一 
起 。 边 框 样式 的 属性 如 下 所 示 。 

@ ”border-style: 设置 边框 的 样式 。 

@ ”border-width: 设置 边框 的 宽度 。 

@ ”border-color: 设置 边框 的 颜色 。 

border-style 属性 用 于 设置 元 素 所 有 边框 的 样式 ， 或 者 单独 地 为 各 边 设置 边框 样式 。 其 
属性 值 如 表 2-11 所 示 。 
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表 2-11 边框 的 样式 

属性 值 说 明 
none 定义 无 边框 
hidden 与 none 相同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边框 冲突 
dotted 定义 点 状 边框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 
dashed 定义 虚线 。 在 大 多 数 浏览 器 中 呈现 为 实 线 
solid 定义 实 线 
double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 
groove 定义 3D 凹 槽 边框。 其 效果 取决 于 border-color 的 值 
Tidge 定义 3D 化 状 边框 。 其 效果 取决 于 border-color 的 值 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 y ; 
outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 > SS 
inherit 规定 从 父 元 素 继承 边框 样式 
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在 表 2-11 列 出 的 属性 值 中 ， 最 不 可 预测 的 边框 样式 是 double。 它 定义 为 两 条 线 的 宽度 
再 加 上 这 两 条 线 之 间 的 空间 ， 等 于 border-width 值 。 


上 注意 : CSS 规范 并 没有 说 其 中 一 条 线 是 否 比 另 一 条 粗 或 者 两 条 线 是 否 应 该 是 一 样 
粗 ， 也 没有 指出 线 之 间 的 空间 是 否 应 当 比 线 粗 。 所 有 这 些 都 由 用 户 浏览 器 决定 ， 开 发 人 
员 对 这 个 决定 没有 任何 影响 。 
border-width 属性 为 元 素 的 所 有 边框 设置 宽度 ， 或 者 单独 地 为 各 边框 设置 宽度 。 只 有 

边框 样式 不 是 none 时 才 起 作用 。 如 果 边 框 样式 是 none， 边 框 宽度 实际 上 会 重 置 为 0。 不 
允许 指定 负 长 度 值 。 

border-width 属性 的 可 取 值 如 下 所 示 。 
thin: 定义 细 的 边框 。 
medium: 默认 值 。 定 义 中 等 的 边框 。 
thick: 定义 粗 的 边框 。 
length: 允许 您 自 定义 边框 的 宽度 。 
inherit: 规定 从 父 元 素 继承 边框 样式 。 

border-color 属性 是 一 个 简写 属性 ， 可 设置 四 条 边框 的 颜色 。border-color 属性 设置 一 
个 元 素 的 所 有 边框 中 可 见 部 分 的 颜色 ， 或 者 为 4 个 边 分 别 设置 不 同 的 颜色 。 

border-color 属性 的 可 取 值 与 color 属性 一 样 ， 但 border-color 属性 可 取 1~4 个 值 ， 其 取 
值 的 数量 与 定义 的 颜色 样式 如 下 所 示 。 

@ 定义 4 个 颜色 值 : 分 别 定义 上 边框 、 右 边框 、 下 边框 和 左边 框 的 颜色 。 

@ 定义 3 个 颜色 值 : 合并 左右 边框 的 颜色 设置 ， 分 别 定义 上 边框 、 左 右边 框 和 下 边 


I 


框 的 颜色 。 
@ 定义 2 个 颜色 值 : 合并 上 下 边框 和 左右 边框 的 颜色 设置 ， 分 别 定 义 上 下 边框 的 颜 
色 和 左右 边框 的 颜色 。 


e@ ”定义 1 个 颜色 值 ， 将 所 有 边框 的 颜色 统一 设置 为 一 种 颜色 。 
颜色 的 取 值 可 以 是 英文 单词 、 十 六 进 制 颜色 值 、rgb 代码 的 颜色 值 或 transparent。 默 认 
值 是 transparent， 表 示 边 框 颜色 为 透明 。 
【 例 2.9】 
创建 页 面 并 添加 两 个 表格 ， 分 别 定义 第 1 个 表格 的 4 个 边框 为 虚线 、 粗 线 ， 颜 色 各 不 
相同 ; 定义 第 2 个 表格 边框 为 3D 垄 状 边框 ， 上 下 边框 颜色 相同 ， 左 右边 框 颜 色相 同 ， 步 
又 如 下 。 
定义 第 1 个 表格 的 4 个 边框 为 虚线 、 粗 线 ， 颜 色 各 不 相同 ， 定 义 第 2 个 表 
格 边框 为 3D 化 状 边框 ， 上 下 边框 颜色 相同 ， 左 右边 框 颜色 相同 ， 其 样式 代码 如 
下 所 示 : 
<style type="text/css"> 
-tablel 1{ 
border-style: dashed; 
border-width: thick; 
border-color: #89DAF4 #00ff90 #f£ffd800 #f£ff6a00; 


} 
.table2 { 
border-style: ridge; 
border-width: thick; 
border-color: #89D4F4 #00ff90; 
} 
</style> 


E 


向 页 面 添加 两 个 表格 ， 分 别 使 用 上 述 两 种 样式 ， 向 表格 中 添加 诗词 ， 省 略 
部 分 代码 ， 其 表格 代码 如 下 所 示 : 


<table> 
中 
<td class="tablel"> 
<!-- 省 略 部 分 代码 --> 
</td> 
SALEr> 
</table> 
<table> 
< 
<td class="table2"> 
<!-- 省 略 部 分 代码 --> 
</td> 
人 
</table> 


鸭 加 03】 运行 上 述 代码 ， 其 效果 如 图 2-11 所 示 。 


人 折 组 局 家 生 ， 证 马 站 Er 


图 2-11 使 用 表格 边框 设置 


2. 表格 的 其 他 样式 


表格 的 其 他 样式 包括 表格 的 大 小 和 边 距 、 表 格 单元 格 的 边框 距离 、 标 题 位 置 、 空 白 单 
元 格 的 显示 以 及 单元 格 算法 等 。 

表格 的 大 小 由 表格 的 宽度 和 高 度 决定 ， 分 别 使 用 width 属性 和 height 属性 来 设置 ， 表 
格 的 边 距 指 的 是 表格 的 内 边 距 ， 即 表格 内 容 与 边框 之 问 的 距离 ， 由 padding 属性 来 设置 
单元 格 与 单元 格 之 间 的 距离 使 用 border-spacing 属性 。width、height、padding、 border- 
spacing 这 几 个 属性 都 可 以 使 用 具体 的 数值 或 百分比 来 设置 ， 这 里 不 再 详细 介绍 。 

(1) 表格 的 caption-side 属性 设置 表格 标题 的 位 置 ， 有 以 下 几 种 取 值 。 
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top: 默认 值 。 把 表格 标题 定位 在 表格 之 上 。 
bottom: 把 表格 标题 定位 在 表格 之 下 。 

@ ”inherit 规定 从 父 元 素 继承 caption-side 属性 的 值 。 

(2) 表格 的 empty-cells 属性 设置 是 否 显 示 表 格 中 的 空 单元 格 。 该 属性 定义 了 不 包含 任 
何 内 容 的 表单 元 格 如 何 表 示 。 如 果 显 示 ， 就 会 绘制 出 单元 格 的 边框 和 背景 。 除 非 border- 
collapse 设置 为 separate， 和 否则 将 忽略 这 个 属性 。 

@ hide: 不 在 空 单元 格 周围 绘制 边框 。 

@ ”show: 在 空 单元 格 周围 绘制 边框 。 默 认 值 。 

@ inherit， 规 定 应 该 从 父 元 素 继承 empty-cells 属性 的 值 。 

(3) table-layout 设置 单元 、 行 和 列 的 算法 规则 ， 实 质 是 设置 单元 格 的 大 小 怎样 决定 。 
单元 格 的 大 小 可 以 由 浏览 器 根据 内 容 自动 设置 ， 也 可 以 由 开发 人 员 设 置 。 单 元 格 的 设置 有 
两 种 ， 一 种 是 固定 设置 ， 由 开发 人 员 固 定单 元 格 的 大 小 ; 另 一 种 是 自动 设置 。 说 明 如 下 : 

固定 设置 与 自动 设置 相 比 ， 允 许 浏览 器 更 快 地 对 表格 进行 设置 。 
在 固定 设置 中 ， 水 平 大 小 仅 取 决 于 表格 宽度 、 列 宽度 、 表 格 边框 宽度 、 单 元 格 间 
距 ， 而 与 单元 格 的 内 容 无 关 。 
通过 使 用 固定 设置 ， 浏 览 器 在 接收 到 第 一 行 后 就 可 以 显示 表格 。 
在 自动 设置 中 ， 列 的 宽度 是 由 列 单元 格 中 没有 折 行 的 最 宽 的 内 容 设 定 的 。 此 算法 
有 时 会 较 慢 ， 这 是 由 于 它 在 确定 最 终 的 设置 之 前 需要 访问 表格 中 所 有 的 内 容 。 

e@ 固定 设置 算法 比较 快 ， 但 是 不 太 灵活 ， 而 自动 设置 比较 慢 ， 不 过 更 能 反映 传统 的 
HTML 表格 。 

3. 轮廓 


轮廓 的 表现 形式 与 边框 类 似 ， 因 此 其 属性 也 相似 ， 都 有 着 定义 线条 宽度 、 线 条 样式 和 
颜色 的 属性 。 
outline-style 属性 设置 元 素 的 轮廓 样式 ， 其 属性 值 与 边框 的 样式 相似 ， 如 表 2-12 所 示 。 


表 2-12 轮廓 样式 
属性 值 说 明 

none 默认 值 。 定 义 无 轮廓 

dotted 定义 点 状 的 轮廓 

dashed 定义 虚线 轮廓 

solid 定义 实 线 轮 廓 

double 定义 双 线 轮廓 。 双 线 的 宽度 等 同 于 outline-width 的 值 

groove 定义 3D 凹 槽 轮廓 。 此 效果 取决 于 outline-color 值 

Tidge 定义 3D 凸 模 轮廓 。 此 效果 取决 于 outline-color 值 

inset 定义 3D 凹 边 轮廓 。 此 效果 取决 于 outline-color 值 
2 outset 定义 3D 凸 边 轮廓 。 此 效果 取决 于 outline-color 值 
(7 inherit 规定 从 父 元 素 继承 轮廓 样式 的 设置 


除了 样式 以 外 ， 轮 廓 使 用 outline-color 属性 设置 颜色 ， 其 属性 值 可 参考 边框 颜色 的 属 
性 值 ， 使 用 outline-width 属性 设置 宽度 ， 其 属性 值 可 参考 边框 宽度 的 属性 值 。 


2.4.8 其 他 样式 


在 HIML 元 素 中 ， 很 多 元 素 都 有 着 边框 和 内 容 之 间 的 距离 (内 边 距 )， 以 及 围绕 元 素 边 
框 的 空白 区 域 (外 边 距 )。 除 此 之 外 ， 元 素 还 具有 定位 属性 和 浮动 属性 。 
1.， 内 边 距 


内 边 距 使 用 padding 属性 定义 ， 其 属性 值 可 以 是 auto、 长 度 值 或 百分比 值 ， 但 不 允许 
使 用 负 值 。auto 表示 使 用 浏览 器 默认 的 样式 。 

内 边 距 分 为 上 边 距 、 下 边 距 、 左 边 距 和 右边 距 ， 可 以 为 padding 属性 定义 4 个 属性 
值 ， 分 别 根据 上 、 右 、 下 、 左 的 顺序 为 元 素 设 置 内 边 距 ， 也 可 以 使 用 padding-top、 
padding-right、padding-bottom、padding-left 这 4 个 属性 分 别 对 上 边 距 、 右 边 距 、 下 边 距 、 
左边 距 进行 设置 。 

这 些 边 距 的 属性 值 可 以 是 百分比 ， 百 分 数值 是 相对 于 其 父 元 素 的 width 计算 的 ， 所 以 
如 果 父 元 素 的 width 改变 ， 它 们 也 会 改变 。 

上 下 内 边 距 与 左右 内 边 距 一 致 ， 即 上 下 内 边 距 的 百分数 会 相对 于 父 元 素 宽度 设置 ， 而 
不 是 相对 于 高 度 。 

2. 外 边 距 

设置 外 边 距 会 在 元 素 外 创建 额外 的 “空白 ”。 设 置 外 边 距 最 简单 的 方法 就 是 使 用 
margin 属性 ， 该 属性 接受 任何 长 度 单位 、 百 分 数值 、auto， 甚 至 是 负 值 。 

margin 属性 与 padding 属性 一 样 ， 可 以 同时 定义 4 个 方向 上 的 外 边 距 ， 根 据 上 、 右 、 
下 、 左 的 顺序 为 元 素 设置 外 边 距 ， 也 可 以 分 别 使 用 margin-bottom( 元 素 的 下 外 边 距 )、 
margin-left( 元 素 的 左 外 边 距 )、margin-right( 元 素 的 右 外 边 距 )、margin-top( 元 素 的 上 外 边 距 ) 
来 设置 外 边 距 。 

padding 属性 和 margin 属性 都 可 以 有 缺 省 的 情况 ， 即 定义 少 于 4 个 边 距 值 ， 来 设置 4 
个 边 距 。 其 使 用 规则 如 下 所 示 : 

@ ”如 果 缺 少 左 外 边 距 的 值 ， 则 使 用 右 外 边 距 的 值 。 

@ ”如 果 缺 少 下 外 边 距 的 值 ， 则 使 用 上 外 边 距 的 值 。 

@ 如果 缺少 右 外 边 距 的 值 ， 则 使 用 上 外 边 距 的 值 。 

换 句 话说， 如 果 为 外 边 距 指 定 了 3 个 值 ， 则 第 4 个 值 ( 即 左 外 边 距 ) 会 从 第 2 个 值 ( 右 外 
边 距 ) 复 制 得 到 。 如 果 给 定 了 两 个 值 ， 第 4 个 值 会 从 第 2 个 值 复制 得 到 ， 第 3 个 值 (下 外 边 
距 ) 会 从 第 1 个 值 (上 外 边 距 ) 复 制 得 到 。 最 后 一 种 情况 ， 如 果 只 给 定 一 个 值 ， 那 么 其 他 3 个 
外 边 距 都 由 这 个 值 (上 外 边 距 ) 复 制 得 到 。 

Netscape 和 正 对 body 标记 定义 的 默认 边 距 (margin) 值 是 8px。 而 Opera 不 是 这 样 。 相 
反 地 ，Opera 将 内 部 填充 (padding) 的 默认 值 定义 为 8px， 因 此 如 果 希 望 对 整个 网 站 的 边缘 部 
分 进行 调整 ， 并 将 之 正确 显示 于 Opera 中 ， 那 么 必须 对 body 的 padding 进行 自 定义 。 
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3. 外 边 距 的 合并 


与 表格 中 边框 的 合并 一 样 ， 外 边 距 是 可 以 合并 的 。 但 这 个 合并 是 由 浏览 器 自主 控制 ， 
并 不 是 人 为 设置 的 。 

通常 ， 当 两 个 垂直 外 边 距 相遇 时 ， 它 们 将 形成 一 个 外 边 距 。 合 并 后 的 外 边 距 的 高 度 等 
于 两 个 发 生 合并 的 外 边 距 的 高 度 中 的 较 大 者 。 

外 边 距 合并 (全 加 ) 是 一 个 相当 简单 的 概念 。 但 是 ， 在 实践 中 对 网 页 进行 布局 时 ， 它 会 

造成 许多 混淆 。 外 边 距 的 合并 有 以 下 儿 种 情况 : 
@ ” 当 一 个 元 素 出 现在 另 一 个 元 素 上 面 时 ， 第 一 个 元 素 的 下 外 边 距 与 第 二 个 元 素 的 上 
外 边 距 会 发 生 合并 。 
@ 当 一 个 元 素 包含 在 另 一 个 元 素 中 时 (假设 没有 内 边 距 或 边框 把 外 边 距 分 隔 开 )， 它 
们 的 上 和 /或 下 外 边 距 也 会 发 生 合 并 。 
e@ 假设 有 一 个 空 元 素 ， 它 有 外 边 距 ， 但 是 没有 边框 或 填充 。 在 这 种 情况 下 ， 上 外 边 
距 与 下 外 边 距 就 碰 到 了 一 起 ， 它 们 会 发 生 合并 。 如 果 这 个 外 边 距 遇 到 另 一 个 元 素 
的 外 边 距 ， 它 还 会 发 生 合并 。 这 就 是 一 系列 的 段落 元 素 占 用 空间 非常 小 的 原因 ， 
因为 它们 的 所 有 外 边 距 都 合并 到 一 起 ， 形 成 了 一 个 小 的 外 边 距 。 
以 由 儿 个 段落 组 成 的 典型 文本 页 面 为 例 ， 第 一 个 段落 上 面 的 空间 等 于 段落 的 上 外 边 
距 。 如 果 没 有 外 边 距 合并 ， 后 续 所 有 段落 之 间 的 外 边 距 都 将 是 相 邻 上 外 边 距 和 下 外 边 距 的 
和 。 这 意味 着 段落 之 间 的 空间 是 页 面 项 部 的 两 倍 。 如 果 发 生 外 边 距 合并 ， 段 落 之 间 的 上 外 
边 距 和 下 外 边 距 就 合并 在 一 起 ， 这 样 各 处 的 距离 就 一 臻 了 。 
只 有 普通 文档 流 中 块 框 的 垂直 外 边 距 才 会 发 生 外 边 距 合并 。 行 内 框 、 浮 动 框 或 绝对 定 
位 之 间 的 外 边 距 不 会 合并 。 

4. 元 素 的 定位 与 浮动 

CSS 为 定位 和 浮动 提供 了 一 些 属性 ， 利 用 这 些 属性 ， 可 以 建立 列 式 布局 ， 将 布局 的 一 
部 分 与 男 一 部 分 重合 ， 还 可 以 完成 多 年 来 通常 需要 使 用 多 个 表格 才能 完成 的 任务 。 

定位 的 基本 思想 很 简单 ， 它 允许 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现 的 位 置 ， 或 者 
相对 于 父 元 素 、 另 一 个 元 素 甚至 浏览 器 窗口 本 身 的 位 置 。 
另 一 方面 ，CSS 1 中 首次 提出 了 浮动 ， 它 以 Netscape 在 Web 发 展 初期 增加 的 一 个 功能 
为 基础 。 浮 动 不 完 全 是 定位 ， 不 过 ， 它 当然 也 不 是 正常 流 布局 。 我 们 会 在 后 面 的 章节 中 明 
确 浮动 的 含义 。 

元 素 的 定位 使 用 position 属 性 ， 通 过 使 用 position 属 性 ， 可 以 选择 4 种 不 同类 型 的 定 
位 ， 这 会 影响 元 素 框 生成 的 方式 。position 属 性 值 及 其 说 明 如 表 2-13 所 示 。 


表 2-13 ”position 属 性 (元 素 框 生成 的 方式 ) 


static 元 素 框 正常 生成 。 块 级 元 素 生成 一 个 矩形 框 ， 作 为 文档 流 的 一 部 分 ， 行 内 元 素 则 会 创建 
一 个 或 多 个 行 框 ， 置 于 其 父 元 素 中 


| relative 元 素 框 偏 移 某 个 距离 。 元 素 仍 保持 其 未 定位 前 的 形状 ， 它 原本 所 占 的 空间 仍 保留 


续 表 


属性 值 说 明 


abs' 


olute “| 元 素 框 从 文档 流 完全 删除 ， 并 相对 于 其 包含 块 定位 。 包 含 块 可 能 是 文档 中 的 另 一 个 元 素 
或 者 是 初始 包含 块 。 元 素 原先 在 正常 文档 流 中 所 占 的 空间 会 关闭 ， 就 好 像 元 素 原来 不 存 
在 一 样 。 元 素 定位 后 生成 一 个 块 级 框 ， 而 不 论 原来 它 在 正常 流 中 生成 何 种 类 型 的 框 


fixed 元 素 框 的 表现 类 似 于 将 position 设置 为 absolute， 不 过 其 包含 块 是 视窗 本 身 


ES 相对 定位 实际 上 被 看 作 普 通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 是 相对 
于 它 在 普通 流 中 的 位 置 的 。 


在 position 属性 定义 了 元 素 框 生成 方式 之 后 ， 即 可 对 元 素 的 位 置 进行 设置 ， 包 括 项 部 


偏 移 、 左 侧 偏 移 、 右 侧 偏 移 等 ， 如 表 2-14 所 示 。 
表 2-14 position 属性 (元 素 的 位 置 ) 

属性 值 说 明 
top 定义 了 一 个 定位 元 素 的 上 外 边 距 边 界 与 其 包含 块 上 边界 之 间 的 偏 移 
Tight 定义 了 定位 元 素 右 外 边 距 边 界 与 其 包含 块 右边 界 之 间 的 偏 移 
bottom 定义 了 定位 元 素 下 外 边 距 边 界 与 其 包含 块 下 边界 之 间 的 偏 移 
left 定义 了 定位 元 素 左 外 边 距 边界 与 其 包含 块 左边 界 之 间 的 偏 移 
overflow 设置 当 元 素 的 内 容 溢出 其 区 域 时 发 生 的 事情 
clip 设置 元 素 的 形状 。 元 素 被 前 入 这 个 形状 之 中 ， 然 后 显示 出 来 
Vertical-aligl 设置 元 素 的 垂直 对 齐 方式 
Z-index 设置 元 素 的 堆 车 顺序 


见 。 
大 ， 
top、 


周围 
是 何 


表 2-14 中 ， 上 面 4 个 偏 移 属性 可 直接 设置 长 度 、 百 分 比 等 数值 ，overflow 表示 当 内 容 
时 对 内 容 的 剪辑 和 显示 形式 ， 可 取 值 如 下 所 示 。 

@ visible: 默认 值 。 内 容 不 会 被 修 前 ， 会 呈现 在 元 素 框 之 外 。 

hidden: 内 容 会 被 修剪 ， 并 且 其 余 内 容 是 不 可 见 的 。 

scroll: 内容 会 被 修剪 ， 但 是 浏览 器 会 显示 滚动 条 以 便 查 看 其 余 的 内 容 。 

auto: 如 果 内 容 被 修剪 ， 则 浏览 器 会 显示 滚动 条 以 便 查 看 其 余 的 内 容 。 

inherit， 规定 应 该 从 父 元 素 继承 overflow 属性 的 值 。 

clip 属性 用 于 定义 一 个 剪裁 矩形 。 对 于 一 个 绝对 定义 元 素 ， 在 这 个 矩形 内 的 内 容 才 可 
出 了 这 个 剪裁 区 域 的 内 容 会 根据 overflow 的 值 来 处 理 。 剪 裁 区 域 可 能 比 元 素 的 内 容 区 
也 可 能 比 内容 区 小 。clip 属性 主要 对 图 片 与 区 域 大 小 不 符 的 情况 进行 定义 ， 可 取 值 为 
right、bottom、left。 


上 述 属 性 定义 了 元 素 的 定位 ，CSS 提供 了 浮动 属性 来 设置 元 素 的 浮动 效果 ， 使 用 float 


float 属性 定义 元 素 在 哪个 方向 浮动 。 以 往 这 个 属性 总 应 用 于 图 像 ， 使 文本 围绕 在 图 像 
， 不 过 在 CSS 中 ， 任 何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 ， 而 不 论 它 本 身 
种 元 素 。 
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如 果 浮 动 非 奉 换 元 素 ， 则 要 指定 一 个 明确 的 宽度 ; 否则 ， 它 们 会 尽 可 能 地 窜 。 
假如 在 一 行 之 上 只 有 极 少 的 空间 可 供 浮 动 元 素 ， 那 么 这 个 元 素 会 跳 至 下 一 行 ， 这 个 过 
程 会 持续 到 某 一 行 拥有 足够 的 空间 为 止 。 
@ left: 元 素 向 左 浮动 。 
right: 元 素 向 右 浮动 。 
none: 默认 值 。 元 素 不 浮动 ， 并 会 显示 在 其 在 文本 中 出 现 的 位 置 。 
inherit: 规定 从 父 元 素 继承 float 属性 的 值 。 
【 例 2.10】 
创建 页 面 并 添加 4 个 div 块 ， 为 其 定义 相同 的 长 度 和 宽度 ， 相 邻 的 两 个 div 块 使 用 不 
同 的 背景 色 。 分 别 查看 这 4 个 div 块 的 默认 定位 和 添加 浮动 属性 后 的 位 置 ， 步 又 如 下 。 
定义 3 个 选择 器 样式 ， 其 中 1 个 是 div 样式 ， 定 义 所 有 的 div 使 用 相同 的 长 
度 和 宽带 :另外 定义 两 个 选择 器 ， 为 div 设置 不 同 的 背景 色 。 相 邻 的 两 个 div 使 
用 不 同 的 背景 色 ， 那 么 4 个 div 使 用 两 种 背景 色 即 可 。 在 定义 了 背景 色 之 后 ， 为 
div 设置 浮动 属性 并 对 该 属性 进行 注释 ， 代 码 如 下 : 
<style type="text/css"> 
div { 
width: 100px; 
height: 25px; 


1 


sdiwl 4 
background-color: #0ff; 
/*float: left;*/ 

» 

-diy2. 
background-color: #0094ff; 
/*float: left;*/ 

} 

</style> 


向 页 面 添加 4 个 div 并 使 相 邻 的 两 个 用 不 同 的 选择 器 样式 ， 代 码 如 下 : 


<div class="divl">gnbsp;</div> 
<div class="div2">gnbsp;</div> 
<div class="divl">gnbsp;</div> 
<div class="div2">gnbsp;</div> 


上 述 代码 中 ，div 除了 背景 色 、 出 现 的 顺序 不 同 外 ， 其 他 设置 完全 相同 。 其 显示 效果 
如 图 2-12 所 示 。 


3 G Dlocalhost:3196/Htmlpage20html 窑 =| 


2-12 div 的 默认 位 置 


将 步骤 01 中 的 注释 改 为 非 注释 状态 ， 运 行 上 述 代码 ， 显 示 效 果 如 图 2-13 
所 示 。 由 于 div 宽度 较 小 ， 完 全 可 以 并 排 显 示 在 同一 行 ， 因 此 使 用 了 靠 左 浮动 属 
性 的 div 顺序 排列 在 了 页 面 的 同一 个 高 度 。 


1 localhost3196/Htmlpac x qe ”3 


3 G |D localhost:3196/HtmlPage20.html 


2-13 div 的 浮动 效果 


2.5 ”实战 一 一 诗词 鉴赏 页 面 设计 


本 章 前 面部 分 详细 介绍 了 CSS 的 用 法 及 其 常用 样式 ， 这 里 结合 本 章 的 知识 ， 设 计 诗 词 
鉴赏 页 面 。 使 用 例 2.8 中 的 页 面 构成 ， 向 其 中 添加 两 行 表格 ， 分 别 为 “李商隐 ”文本 和 3 
首 李 商 隐 的 诗词 ， 并 分 别 为 这 个 表格 以 及 表 中 单元 格 内 的 列表 设置 样式 ， 步 又 如 下 。 

定义 表格 的 样式 。 首 先 定义 所 有 的 表格 宽度 为 30%， 字 体 居中 显示 ， 代 码 

如 下 : 
<style type="text/css"> 
td 二 
width: 30%; 
text-align: center; 
} 
</style> 
定义 单个 单元 格 的 样式 。 定 义 “ 白 居 易 ” 和 “李商隐 ”这 两 行使 用 相同 的 
样式 ， 字 间距 lem; 字体 为 SimSun; 字体 大 小 为 xx-large; 字体 粗细 为 500， 代 
码 如 下 : 
:dl ‘{ 
letter-spacing: lem; 
font-family: SimSun; 
font-size: xx-large; 
font-weight: 500; 


国 轨 03| 定义 白居易 诗词 行 的 第 1 个 单元 格 字体 为 红色 ， 代 码 如 下 : 


color: red; 


} 
定义 白居易 诗词 行 的 第 2 个 单元 格 字体 为 STXingkai， 代 码 如 下 : 
td3 


font-family: STXingkai; 
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国 轨 05| 为 白居易 诗词 行 的 第 3 个 单元 格 字体 添加 下 划 线 ， 代 码 如 下 : 


text-decoration: underline; 


力 国 06] 定义 李商隐 诗词 行 的 第 1 个 单元 格 字体 是 斜体 ， 代 码 如 下 : 


font-style: italic; 


国 妇 07| 设置 李商隐 诗词 行 的 第 3 个 单元 格 字体 是 蓝 色 ， 代 码 如 下 : 


color: blue; 


国 轨 08】 设置 两 个 列表 的 图 片 标 志 ， 分 别 用 于 白居易 和 李商隐 的 诗词 ， 代 码 如 下 : 


i 
list-style-image: url('Images/star.jpg'); 
} 
| 
list-style-image: url('Images/starblue.jpg'); 
| 


向 页 面 中 添加 表格 ， 分 别 在 表格 的 每 一 行 ( 即 tr 元 素 ) 中 添加 内 联 样式 ， 定 
义 “ 白 居 易 ”和 “李商隐 ”这 两 行使 用 “#89D4F4” 背 景色 ; 而 两 人 的 诗词 行使 
用 “#CCFFFF” 背 景色 ， 并 分 别 为 每 一 个 单元 格 添加 class 属性 加 载 CSS 样式 。 
这 里 省 略 页 面 中 的 诗词 文本 ， 代 码 如 下 : 

<table> 
<tr style="background-color: #89D4F4"> 

<td>gnbsp; </td> 
<td class="tdl"> 白 居 易 </td> 
<td>gnbsp; </td> 
</tr> 
<tr style="background-color: #CCFFFF"> 
<td class="td2"> 
<ul class="ul1"> 
<!-- 省 略 诗词 文本 --> 
</ul> 
</td> 
<td class="td3"> 
<ul class="ul11"> 
<!-- 省 略 诗词 文本 --> 
</ul> 
</td> 
<td class="td4"> 
<ul class="ull1"> 
<!-- 省 略 诗词 文本 --> 
</ul> 
</td> 
SEE 


<tr style="background-color: #89D4F4"> 
<td>gnbsp; </td> 
<td class="td1"> 李 商 隐 </td> 
<td>gnbsp; </td> 
</tr> 
<tr style="background-color: #CCFFFF"> 
<td class="td5"> 
<ul class="ul2"> 
<!-- 省 略 诗词 文本 --> 
</ul> 
</td> 
<td> 
<ul class="ul2"> 
<!-- 省 略 诗词 文本 --> 
</ul> 
</td> 
<td class="td6"> 
<ul class="ul2"> 
<!-- 省 略 诗词 文本 --> 
</ul> 
</td> 
</tr> 
</table> 


运行 上 述 代 码 ， 效 果 如 图 2-14 所 示 。 
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| localhost3196/Htmlpac > OO 
€ 2 & | localhost3196/HtmlPage27 html 


帝 城 泰 驶 蓝 
共 道 拉 凡 时， 
责 量 无须 价 
圾 雹 百 末 纪 


区 部 玉 雹 性 五 六 注 ， 一 党 一 信人 从 生 . 非 夜 星 家 帮 夜 风 ， 画 楼 西 时 杜 枸 未 。 。 区 ” 相 见 时 难 别 亦 难 ， 示 风 无 力 百花 残 。 
加 计生 琵 打 兴 邮 晶 ， 闻 秃头 必 大 天 名- 身 无 彩 风 双 飞 夏 ， 心 有 灵犀 一 点 通 。 。 加 等到 到 死 丝 方 尽 ， 晴 炬 成 灰 泪 始 二 
区 站 旗 甩 女 磋 阁 间 ， 道 爵 忆 有 五 生 析 砚 认 送 均 春 酒 艾 ， 分 章 身 夏娃 林 红 。 。 区 晓 术 但 生 去 守 改 ， 夜 只 应 沉 月 光 寒 。 
加 必 畔 丰 队 成 首 龙 ， 扩 是 当 91 已 后 外 联 余 听 鼓 应 宫 去 ， 走 马兰 从 类 转 证 。 。 四 到 山 此 去 无 多 路， 青鸟 股 惑 尖 探 看 。 


2-14 ”诗词 鉴赏 


2.6 本 章 习 题 


1. 填空 题 

(1) CSS 样式 有 着 3 种 形式 : 外 部 样式 表 、 内 部 样式 表 和 

(2) 选择 器 分 组 时 使 用 将 选择 器 隔 开 。 六 
(3) 设置 背景 不 重复 的 语句 是 5 y 
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(4) 设置 字体 为 黑体 ， 使 用 属性 。 
(5) 设置 字体 为 黑体 ， 使 用 属性 值 。 
(6) 设置 已 访问 过 的 链接 使 用 属性 。 
2. 选择 题 
(1) 下 列 属性 值 中 ，background-position 属性 不 能 取 的 值 是 5 
A. top left B. top right C. bottom left D. top bottom 
(2) 下 列 不 属于 文本 对 齐 方式 text-align 取 值 的 是 。 . 
A. top B. center C. inherit D. justify 
(3) 下 列 字体 样式 中 ， 在 CSS 2.1 中 已 删除 的 是 A 
A. font-size B. font-stretch CC. font-style D. font-variant 


(4) 下 列 关 于 链接 的 属性 错误 的 是 
A.，ailink 表示 未 被 访问 的 链接 
B. aivisited 表示 用 户 已 访问 的 链接 
C.，a:hover 表示 鼠标 指针 位 于 链接 的 上 方 
D.，a:active 表示 普通 的 链接 

(5) 列表 的 默认 标志 类 型 是 


A. disc B: circle C. square D. decimal 
(6) 下 列 关于 选择 器 分 组 的 样式 语法 正确 的 是 
A ll230 B: hls2;303 C. hl,h2,h3{} D. hl:h2:;h3{} 
3. 上 机 练习 
结合 本 章 知识 ， 设 计 新 闻 页 面 。 要 求 新 闻 页 面 以 表格 的 形式 显示 当前 新 闻 分 类 ， 将 页 


面 分 为 若干 单元 格 ， 每 个 单元 格 有 新 闻 标 题 构成 的 链接 ， 每 个 单元 格 是 一 个 类 型 的 新 闻 。 

如 娱乐 新 闻 的 新 闻 链 接 以 列表 的 形式 放 在 一 个 单元 格 ; 体育 新 闻 的 新 闻 链 接 以 列表 的 
形式 放 在 另 一 个 单元 格 。 

新 闻 页 面 的 设计 要 符合 下 面 的 要 求 : 

@ 不 同类 型 的 新 闻 使 用 不 同 列表 标志 图 片 。 

@ 表格 的 奇数 行 和 偶数 行使 用 不 同 的 背景 色 。 

@ 要求 没有 访问 过 的 链接 使 用 黑色 字体 ; 访问 过 的 使 用 红色 字体 ; 鼠标 放 在 链接 上 

面 时 ， 链 接 显示 粉色 背景 。 
@ 页 面 中 的 列表 统一 靠 左 显示 。 
@ 页 面 中 的 字体 统一 使 用 仿宋 字体 。 
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JavaScript 脚 本 语言 


网 页 技术 中 的 HIML 和 CSS 共同 实现 了 页 面 设计 ， 但 若 要 使 页 面 呈 现 动态 
效果 ， 离 不 开 脚本 语言 。 

脚本 是 批 处 理 文 件 的 延伸 ， 是 一 种 以 纯 文本 方式 保存 的 程序 。 计 算 机 脚本 程 
序 通 常 是 确定 的 一 系列 控制 计算 机 进行 运算 操作 动作 的 组 合 ， 在 其 中 可 以 实现 一 
定 的 逻辑 分 支 等 。 

JavaSeript 是 世界 上 最 流行 的 脚本 语言 。 本 章 详细 介绍 JavaScript 的 基础 知 
识 、 优 点 及 其 启用 


本 章 学 习 目 标 : 

了 解 JavaScript 脚本 的 特点 

理解 JavaScript 变量 的 使 用 

掌握 JavaScript 常用 数据 类 型 
掌握 JavaScript 运算 符 的 使 用 
掌握 JavaScript 语句 的 使 用 

了 解 JavaScript 对 象 

理解 JavaScript 函数 

掌握 JavaScript 对 象 和 函数 的 使 用 
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3.1 JavaScript 脚本 概述 


JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 相对 安全 性 的 客户 端 脚本 语言 。 同 时 也 是 
一 种 广泛 应 用 于 客户 端 Web 开发 的 脚本 语言 ， 常 用 来 给 HTML 网 页 添加 动态 功能 ， 比 如 
响应 用 户 的 各 种 操作 。 

JavaScript 是 客户 端 脚本 语言 ， 不 同 于 服务 器 端 脚本 语言 的 是 ，JavaScript 是 在 用 户 的 
浏览 器 上 运行 的 ， 不 需要 服务 器 的 支持 即 可 以 独立 运行 。 所 以 在 早期 ， 程 序 员 比较 青睐 于 
JavaScript 的 原因 ， 是 可 以 减少 对 服务 器 的 负担 。 


1. JavaScript 的 特点 


由 于 JavaScript 是 运行 在 客户 端的 ， 因 此 其 安全 性 是 程序 员 担 忧 的 问题 。 尽 管 如 此 ， 
JavaScript 仍然 以 其 跨 平台 、 容 易 上 手 等 优势 大 行 其 道 。 

JavaScript 是 世界 上 最 流行 的 编程 语言 ， 其 优点 如 下 : 

@ JavaScript 是 属于 Web 的 语言 ， 它 适用 于 服务 器 、PC、 笔 记 本 电脑 、 平 板 电脑 和 
智能 手机 等 设备 。 
JavaScript 是 一 种 轻 量 级 的 编程 语言 。 
JavaScript 是 可 插入 HTML 页 面 的 编程 代码 。 
JavaScript 插入 HIML 页 面 后 ， 可 由 所 有 的 现代 浏览 器 执行 。 
JavaScript 容易 学 习 。 几 乎 每 个 人 都 能 将 小 的 JavaScript 片段 添加 到 网 页 中 。 
客户 端 脚 本 在 客户 端 执行 ， 减 轻 了 服务 器 的 负担 。 

JavaScript 是 一 种 脚本 语言 ， 其 源 代码 在 发 往 客户 端 运 行 之 前 不 需 经 过 编译 ， 而 是 将 文 
本 格式 的 字符 代码 发 送 给 浏览 器 ， 由 浏览 器 解释 运行 。 这 样 的 语言 称 为 解释 语言 。 

解释 语言 也 有 着 它们 的 弱点 ， 表 现 如 下 : 

@ ”如 果 一 条 JavaScript 语句 运行 不 了 ， 那 么 其 后 续 的 语句 也 无 法 运行 。 

e 每 次 重新 加 载 都 会 重新 解释 ， 速 度 较 慢 。 

2. JavaScript 的 构成 


一 个 完整 的 JavaScript 实现 由 以 下 3 个 不 同 部 分 组 成 :核心 (ECMAScript)、 文 档 对 象 
模型 (Document Object Model，DOM)、 浏 览 器 对 象 模型 (Browser Object Model，BOMD)。 

JavaScript 是 一 种 程序 设计 语言 ， 有 着 自己 的 变量 、 数 据 类 型 、 语 句 、 函 数 和 对 象 。 
JavaScript 程序 是 由 若干 语句 组 成 的 ， 语 句 是 编写 程序 的 指令 。 

JavaScript 提供 了 完整 的 基本 编程 语句 ， 它 们 是 赋值 语句 、switch 选择 语句 、while 循 
环 语 句 、for 循环 语句 、foreach 循环 语句 、do-while 循环 语句 、break 循环 中 止 语 句 、 
continue 循环 中 断 语 句 、with 语句 、try-catch 语句 、 寺 语句 (if-else，if-else-if)。 

JavaScript 虽然 是 弱 类 型 的 程序 设计 语言 ， 但 其 内 置 的 对 象 能 够 处 理 不 同类 型 的 数据 ， 
其 常见 的 数据 类 型 有 对 象 、 数 组 、 数 、 布 尔 值 、 空 值 ， 而 JavaScript 可 使 用 的 数据 处 理 有 


字符 串 处 理 、 日 期 处 理 、 数 组 处 理 、 风 辑 处 理 、 算 术 处 理 等 。 
程序 设计 语言 中 通常 都 有 运算 符 的 使 用 ，JavaScript 中 的 运算 符 与 其 他 程序 设计 语言 一 
样 ， 有 算术 运算 符 、 比 较 运 算 符 、 字 符 串 连 接 符 、 逻 辑 运算 符 和 三 目 运算 符 。 


3.2 ” ”JavaScript 的 基本 语法 


了 解 了 JavaScript 的 基础 知识 以 后 ， 本 节 开 始 介绍 JavaScript 的 基本 语法 ， 包 括 一 个 简 
单 的 JavaScript 示例 、JavaScript 中 的 输出 和 注释 等 。 


人 |; 简单 的 JavaScript 例 子 


JavaScript 语句 运行 在 客户 端 ， 需 要 嵌入 在 HIML 中 借助 浏览 器 来 执行 。JavaScript 可 
以 以 语句 的 形式 直接 嵌入 HIML 内 部 ; 也 可 以 在 HIML 中 引用 外 部 的 JavaScript 文件 。 

HTML 中 的 脚本 代码 必须 放 在 <scrip 亿 与 </scrip 亿 标记 之 间 。 脚 本 可 被 放置 在 HIML 页 
面 的 <body> 和 <head> 部 分 中 。 

如 需 在 HTML 页 面 中 插入 JavaScript， 需 要 使 用 <scrip 忆 标记， 其 开始 标记 <scrip 忆 和 
结束 标记 </scrip 们 会 告诉 JavaScript 在 何 处 开始 和 结束 ; 而 JavaScript 代码 放 在 <scrip 忆 和 
</scrip 尼 标记 之 间 。 浏 览 器 会 解释 并 执行 位 于 <scrip 人 和 </scrip 忆 之 间 的 JavaScript。 

由 于 HTML 中 的 脚本 语言 不 止 一 种 ， 因 此 在 HTML 之 前 的 版 本 中 的 <scrip 尼 标记 中 有 
着 type=“text/JavaScript* 属 性 ， 该 属性 表示 该 <scrip 亿 标记 是 JavaScript 脚本 语言 。 而 当前 的 
浏览 器 以 及 HIML 5 中 默认 使 用 JavaScript 脚本 语言 ， 因 此 该 属性 可 以 省 略 。 

【 例 3.1】 

JavaScript 脚本 语言 有 着 可 以 直接 使 用 的 函数 ， 如 document .write(0) 方 法 可 直接 向 页 面 
中 输出 文本 。 本 示例 将 JavaScript 脚本 放 在 <body> 部 分 ， 向 页 面 输出 一 个 标题 和 一 个 段 
落 ， 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

</head> 

<body> 

<script> 
document .write ("<h1l>HELLO JavaScript</h1>"); 
document .write ("<p>This is a JavaScript</p>"); 
</script> 

</body> 

</html> 

上 述 代 码 的 执行 效果 如 图 3-1 所 示 。 

在 HTML 文档 中 可 以 放 入 不 限 数 量 的 脚本 。 脚 本 可 位 于 HTML 的 <body> 或 <head> 部 
分 中 ， 或 者 同时 存在 于 两 个 部 分 中 。 通 常 的 做 法 是 把 函数 放 入 <head> 部 分 中 ， 或 者 放 在 页 
面 底部 。 这 样 就 可 以 把 它们 安置 到 同一 处 位 置 ， 而 不 会 干扰 页 面 的 内 容 。 
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HELLO JavaScript 


This is a JavaScript 


3-1 向 <body> 中 写 文本 


脚本 也 可 以 保存 到 外 部 文件 中 ， 并 在 HTML 文档 中 引用 。 外 部 文件 通常 包含 被 多 个 网 
页 使 用 的 代码 ， 即 多 个 页 面 可 共同 使 用 的 功能 。 

外 部 的 JavaScript 脚本 的 实际 运行 效果 与 在 HTML 内 部 <scrip 忆 标记 中 编写 脚本 完全 一 
致 。 而 且 ，<head> 或 <body> 中 都 可 以 引用 外 部 脚本 文件 。 

外 部 JavaScript 文件 的 文件 扩展 名 是 js， 如 需 使 用 外 部 文件 ， 需 要 在 <scrip 人 标记 的 src 
属性 中 设置 该 js 文件 ， 代 码 如 下 : 

<script src="myScript.js"></script> 

【 例 3.2】 

同时 使 用 内 部 JavaScript 脚本 和 外 部 JavaScript 文件 ， 在 例 3.1 的 基础 上 引用 外 部 文 
件 ， 步 骤 如 下 。 

创建 JavaScript 文件 JavaScriptl.js 并 写 入 输出 语句 ， 代 码 如 下 : 


document .write ("<h2>read JavaScriptl1.js</h2>"); 
document .write ("<p>write JavaScript1.js</p>") 7 


修改 例 3.1 中 的 页 面 代码 如 下 : 


<!DOCTYPE html> 


<html> 
<head> 
</head> 
<body> 
<script> 
document .write ("<h1l>HELLO JavaScript</h1>"); 
document .write("<p>This is a JavaScript</p>"); 
</script> 
<script src="JavaScriptl1.js"></script> 
</body> 
</html> 


在 浏览 器 中 查看 该 页 面 ， 其 效果 如 图 3-2 所 示 。 


此 注意 ;外 部 脚本 文件 中 不 能 包含 <script> 标 记 。 
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HELLO JavaScript 
This is a JavaScript 
read JavaScriptl. js 


write JavaScriptl. js 


3-2 引用 外 部 脚本 的 执行 效果 


3.2.2 ”JavaScript 语 句 


程序 都 是 由 语句 构成 的 ，JavaScript 也 是 一 样 。 除 了 本 章 3.1 节 介 绍 的 基本 语句 以 外 ， 
JavaScript 中 有 着 可 直接 调用 的 对 象 和 函数 ， 用 来 实现 特定 的 功能 。 

例如 ， 例 3.1 中 的 document.write0 方 法 是 一 个 输出 方法 ， 该 语句 是 一 条 输出 语句 。 本 
节 介 绍 JavaScript 中 的 语句 规则 及 其 常用 语句 。 


1. 语句 规则 


JavaScript 语句 有 着 自己 的 执行 规则 ， 有 着 分 号 、 大 小 写字 母 、 空 格 和 换行 等 这 些 符号 
的 使 用 规则 ， 具 体 如 下 所 示 。 

全 分 号 

分 号 用 于 分 隔 JavaScript 语句 ， 通 常 可 以 在 每 条 可 执行 的 语句 结尾 处 添加 分 号 。 在 
JavaScript 中 ， 用 分 号 来 结束 语句 是 可 选 的 ， 分 号 在 JavaScript 中 的 作用 是 在 一 行 中 编写 多 
条 语句 。 因 此 分 号 和 换行 都 可 以 作为 JavaScript 语句 的 结束 。 

(2) JavaScript 对 大 小 写 敏感 

JavaScript 对 大 小 写 是 敏感 的 ， 因 此 在 编写 JavaScript 语句 时 ， 应 留意 是 否 关 闭 了 大 小 
写 切 换 键 。 例 如 ， 函 数 getElementById(0) 与 getElementbyIDO 是 不 同 的 ， 变 量 myVariable 与 
MyVariable 也 是 不 同 的 。 

(3) 空格 

JavaScript 会 忽略 多 余 的 空格 。 通 常 可 以 向 脚本 中 添加 空格 ， 来 提高 其 可 读 性 。 

(4) 单 引 号 和 双 引 号 

在 JavaScript 中 ， 单 引号 和 双 引 号 没有 特殊 的 区 别 ， 都 可 以 用 来 创建 字符 串 ， 但 是 一 
般 情况 下 JavaScript 使 用 单 引号 。 

在 JavaScript 中 ， 单 引号 里 面 可 以 有 双 引 号 ， 双 引号 里 面 也 可 以 有 单 引 号 。 

特殊 情况 下 JavaScript 需要 使 用 转 义 符号 “\”， 例 如 用 Q") 表 示 ("), 用 ("表示 ()， 而 在 
HTIML 中 则 是 用 &quot。 

(5) 语句 块 

JavaScript 中 也 有 着 语句 块 的 概念 ， 语 句 块 是 多 条 语句 的 结合 ，JavaScript 中 的 语句 块 
使 用 大 括号 来 定义 开始 和 结束 。 
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2. 输出 语句 


JavaScript 中 的 输出 函数 不 止 document.write() 这 一 个 ，document.write() 函 数 是 向 页 面 
中 输出 文本 或 HTML 标记 ， 使 用 JavaScript 还 可 向 页 面 中 输出 对 话 框 。 

(1) promptO 函 数 

此 函数 首先 在 浏览 器 窗口 中 弹出 一 个 对 话 框 ， 让 用 户 自行 输入 信息 。 一 旦 输入 完成 
后 ， 就 返回 用 户 所 输入 信息 的 值 。 通 过 使 用 JavaScript 中 所 提供 的 窗口 对 象 函数 prompt0， 
就 能 完成 信息 的 输入 。 该 函数 提供 了 最 简便 的 信息 输入 方式 ， 其 基本 使 用 格式 如 下 : 


test = prompt (" 请 输入 数据 : "， "this is a JavaScript") 


实际 上 promptO 是 window 对 象 的 一 个 函数 。 因 为 默认 情况 下 所 用 的 对 象 就 是 window 
对 象 ， 所 以 window 对 象 可 以 省 略 不 写 。 

(2) document.write() 函 数 和 document.writeln() 函 数 

document 是 JavaScript 中 的 一 个 对 象 ， 在 其 中 封装 了 许多 有 用 的 函数 ， 其 中 write0 和 
writeln0 就 是 用 于 将 文本 信息 直接 输出 到 浏览 器 窗口 中 的 函数 。 二 者 的 唯一 区 别 就 是 
writeln0 函 数 自动 在 文本 之 后 加 入 回 车 符 。 

(3) window.alert0 函 数 

JavaScript 为 了 方便 信息 输出 ， 提 供 了 具有 独立 对 话 框 信息 输出 的 alert0 函 数 。alert( 
函数 是 window 对 象 的 一 个 函数 ， 它 的 主要 用 途 是 在 输出 时 产生 有 关 警 告 提示 信息 或 提示 
用 户 ， 一旦 用 户 单 击 “ 确 定 ” 按 钮 后 ， 将 会 继续 执行 其 他 脚本 程序 。 

【 例 3.3】 

使 用 document.writeln0) 函 数 和 alert0 函 数 ， 分 别 向 页 面 输出 文本 和 对 话 框 ， 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head></head> 

<body> 

<script> 
document .writeln ("<h1>HELLO JavaScript</h1>"); 
alert ("This is a JavaScript"); 
</script> 


</body> 
</html> 


运行 该 页 面 ， 效 果 如 图 3-3 所 示 。 


-~ , 中 
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HELLO J ， 


his is a jewaeript 


3-3 页面 输出 


此 注意 : document write0 仅 仅 用 于 向 文档 写 输 出 内 容 ， 如 果 在 文档 已 完成 加 载 后 执 
行 document.write()， 整 个 HTML 页 面 将 被 覆盖 。 

3. 注释 

大 多 数 程序 设计 语言 都 有 着 注释 语句 ， 注 释 可 用 于 提高 代码 的 可 读 性 ， 注 释 语句 是 不 
会 被 执行 的 。 

JavaScript 中 的 注释 有 两 种 ， 一 种 是 单行 注释 ， 使 用 双 斜 枉 “/”;， 另 一 种 是 多 行 注 
释 ， 将 需要 注释 的 文本 放 在 “/*” 和 “*/” 之 间 。 

(1) 单行 注释 

单行 注释 有 着 两 种 类 型 ， 一 种 是 整 行 注释 ， 将 双 斜 杠 放 在 语句 的 开头 ; 另 一 种 是 在 语 
句 后 面 添加 的 注释 ， 只 注释 后 面 的 解释 语句 。 

对 整 行 的 注释 和 对 语句 的 注释 如 下 所 示 : 

// 这 是 整 行 注释 

document .write ("JavaScript") // 输 出 JavaScript 文本 ， 这 是 对 语句 的 注释 

上 述 代码 中 ， 第 2 行 语句 中 “//” 符 号 前 面 的 语句 是 可 以 被 解析 的 ， 而 “//” 后 面 的 内 
容 将 被 忽略 。 


i 单行 注释 是 不 能 够 换行 的 ， 若 需要 换行 的 话 ， 要 在 每 一 行 注释 的 开头 都 用 
双 斜 杠 标 注 。 

(2) 多 行 注释 

多 行 注 释 用 于 解释 语句 较 多 的 情况 。 多 行 语 句 注释 并 不 是 只 能 够 注释 多 行 ， 也 可 以 在 
单行 进行 注释 。 多 行 注释 使 用 开始 符号 “/*” 和 结束 符号 “*/”， 注 释文 本 放 在 两 个 符号 
之 间 。 这 两 个 符号 可 放 在 同一 行 ， 也 可 放 在 不 同 的 行 ， 放 在 同一 行 相当 于 单行 的 注释 ， 如 
下 所 示 : 

/* 单行 注释 */ 

/* 多 行 注释 第 1 行 

多 行 注释 第 2 行 */ 


3.3” JavaScript 变量 


程序 开发 通常 都 有 着 变量 的 使 用 ， 变 量 取代 程序 中 的 数据 值 ， 参 与 程序 的 执行 。 在 程 
序 开发 的 过 程 中 ， 变 量 的 使 用 使 程序 有 了 重用 性 和 可 移植 性 ， 几 乎 每 一 个 函数 都 需要 有 变 
量 的 参与 。 本 节 介绍 JavaScript 中 的 变量 。 


@.3.1 变量 


程序 中 的 变量 可 以 理解 为 数学 中 的 变量 ， 在 数学 函数 中 ，x 是 一 个 没有 确定 值 的 数 ， 
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如 椭圆 函数 、 抛 物 线 函 数 、 双 曲线 函数 等 ， 图 形 根据 x 的 值 而 变化 ， 程 序 中 的 变量 也 是 如 
此 。 变 量 由 两 部 分 构成 ， 一 个 是 变量 的 名 称 ， 另 一 个 是 变量 的 值 。 如 x=56， 则 变量 名 称 为 


变量 存储 可 以 变化 的 值 ， 变 量 可 以 被 声明 ， 可 以 被 初始 化 ， 可 以 赋值 。 变 量 的 命名 由 
用 户 决定 ， 通 常 命 名 为 有 实际 意义 的 词汇 。 

JavaScript 中 的 变量 命名 有 如 下 几 个 规则 : 

@ ”变量 必须 以 字母 、_ 和 $ 符 号 开头 。 

e ”变量 名 称 对 大 小 写 敏感 (例如 y 和 YY 是 不 同 的 变量 )。 

e ”变量 名 称 不 能 是 保留 字 。 

大 多 程序 开发 语言 在 声明 变量 时 需要 为 变量 指定 一 个 数据 类 型 ，JavaScript 变量 有 很 多 
种 类 型 ， 但 在 声明 时 并 不 指定 。JavaScript 使 用 var 关键 词 来 声明 变量 ， 如 下 所 示 : 

变量 声明 之 后 ， 该 变量 是 空 的 ( 它 没有 值 )。 如 需 向 变量 赋值 ， 可 以 使 用 等 号 ， 例 如 : 

name = "Lucy"; 

变量 在 声明 时 也 可 以 直接 赋值 ， 例 如 : 

Var name = "Lucy"; 

当 为 变量 分 配 文本 值 时 ， 应 该 用 双 引 号 或 单 引 号 包围 这 个 值 ， 否 则 变量 的 值 将 可 能 被 
解释 为 数值 。 向 变量 赋 的 值 是 数值 时 ， 不 要 使 用 引号 。 如 果 用 引号 包围 数值 ， 该 值 会 被 作 
为 文本 来 处 理 。 

JavaScript 可 以 同时 声明 多 个 变量 ， 各 个 变量 之 间 使 用 逗号 分 隔 ， 如 下 所 示 : 

Var name="Gates", age=56, job="CEO"; 


声明 也 可 跨越 多 行 : 

Var name="Gates", 

age=56, 

job="CEO"; 

在 计算 机 程序 中 ， 经 常会 声明 无 值 的 变量 。 没 有 赋值 的 变量 ， 其 值 实际 上 是 
undefined。 如 果 声 明 一 个 变量 但 不 赋值 ， 那 么 输出 该 变量 时 ， 其 值 显示 为 undefined。 


3.3.2 ”数据 类 型 


JavaScript 中 有 5 种 简单 的 数据 类 型 : Undefined、Null、Boolean、Number 和 String。 
还 有 一 种 复杂 数据 类 型 Object，Object 本 质 上 是 由 一 组 无 序 的 值 对 组 成 的 。 
1. Undefined 类 型 


Undefined 类 型 只 有 一 个 值 ， 即 特殊 的 undefined。 在 使 用 var 声明 变量 但 未 对 其 加 以 
初始 化 时 ， 这 个 变量 的 值 就 是 undefined。 


2. Null 类 型 


Null 类 型 是 第 二 个 只 有 一 个 值 的 数据 类 型 ， 这 个 特殊 的 值 是 nul。 从 逻辑 角度 来 看 ， 
null 值 表示 一 个 空 对 象 指针 ， 这 正 是 使 用 typeof 操作 符 检测 null 时 会 返回 object 的 原 

如 果 定 义 的 变量 准备 在 将 来 用 于 保存 对 象 ， 那 么 最 好 将 该 变量 初始 化 为 null， 而 不 是 
其 他 值 。 这 样 一 来 ， 只 要 直接 检测 null 值 ， 就 可 以 知道 相应 的 变量 是 否 已 经 保存 了 一 个 对 
象 的 引用 了 。 

实际 上 ，undefined 值 是 派生 自 null 值 的 ， 因 此 ECMA-262 规定 对 它们 的 相等 性 测试 
要 返回 true。 

尽管 null 和 undefined 有 这 样 的 关系 ， 但 它们 的 用 途 完全 不 同 。 无 论 在 什么 情况 下 都 
没有 必要 把 一 个 变量 的 值 显 式 地 设置 为 undefined， 可 是 同样 的 规则 对 null 却 不 适用 。 换 名 
话说 ， 只 要 是 保存 对 象 的 变量 还 没有 真正 保存 对 象 ， 就 应 该 明确 地 让 该 变量 保存 null 值 。 
这 样 做 不 仅 可 以 体现 null 作为 空 对 象 指针 的 惯例 ， 而 且 也 有 助 于 进一步 区 分 null 和 


undefined。 


加 


3. Boolean 类 型 


该 类 型 只 有 两 个 字面 值 ，true 和 false。 这 两 个 值 与 数字 值 不 是 一 回 事 ， 因 此 true 不 一 
定 等 于 1， 而 false 也 不 一 定 等 于 0。 

虽然 Boolean 类 型 的 字面 值 只 有 两 个 ， 但 JavaScript 中 所 有 类 型 的 值 都 有 与 这 两 个 
Boolean 值 等 价 的 值 。 要 将 一 个 值 转换 为 其 对 应 的 Boolean 值 ， 可 以 调用 类 型 转换 函数 
Boolean()。 

可 以 对 任何 数据 类 型 的 值 调 用 Boolean0 函 数 ， 而 且 总 会 返回 一 个 Boolean 值 。 至 于 返 
回 的 这 个 值 是 true 还 是 false， 取决 于 要 转换 值 的 数据 类 型 及 其 实际 值 。 如 表 3-1 所 示 给 出 
了 各 种 数据 类 型 及 其 对 象 的 转换 规则 。 


表 3-1 Boolean 类 型 转换 规则 


数据 类 型 对 应 false 值 
boolean rr 
string 
number 
object 
Undefined 不 适用 


这 些 转 换 规则 对 理解 流 控制 语句 (如 if 语句 ) 自 动 执行 相应 的 Boolean 转换 非常 重要 ， 
由 于 存在 这 种 自动 执行 的 Boolean 转换 ， 因 此 确切 地 知道 在 流 控制 语句 中 使 用 的 是 什么 变 
量 至 关 重 要 。 


4. Number 类 型 


JavaScript 不 是 类 型 语言 。 与 许多 其 他 编程 语言 不 同 ，JavaScript 不 定义 不 同类 型 的 数 
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值 ， 比 如 整数 ， 以 及 短 、 长 、 浮 点 数 等 。 其 数字 类 型 有 以 下 几 个 特点 : 

@ JavaScript 中 的 所 有 数值 都 存储 为 根 为 10 的 64 位 (8 比特 ) 浮 点 数 。 

@ 整数 (不 使 用 小 数 点 或 指数 计数 法 ) 最 多 为 15 位 。 

@ 小数 的 最 大 位 数 是 17， 但 是 浮 点 运算 并 不 总 是 100% 准 确 。 

@ 如 果 前 绥 为 0， 则 JavaScript 会 把 数值 常量 解释 为 八进制 数 ， 如 果 前 缀 为 0 和 x， 

则 解释 为 十 六 进 制 数 。 

Number 类 型 用 来 表示 整数 和 浮 点 数值 ， 还 有 一 种 特殊 的 数值 ， 即 NaN( 非 数值 ，Not a 
Number)。 这 个 数值 用 于 表示 一 个 本 来 要 返回 数值 的 操作 数 未 返回 数值 的 情况 (这 样 就 不 会 
抛 出 错误 了 )。 

例如 ， 在 其 他 编程 语言 中 ， 任 何 数值 除 以 0 都 会 导致 错误 ， 从 而 停止 代码 执行 。 但 在 
JavaScript 中 ， 任 何 数值 除 以 0 会 返回 NaN， 因 此 不 会 影响 其 他 代码 的 执行 。 

NaN 本 身 有 两 个 非 同 寻常 的 特点 ， 如 下 所 示 : 

@ 任何 涉及 NaN 的 操作 (例如 NaN/10) 都 会 返回 NaN， 这 个 特点 在 多 步 计 算 中 有 可 

能 导致 问题 。 

@ NaN 与 任何 值 都 不 相等 ， 包 括 NaN 本 身 。 

JavaScript 中 有 一 个 isNaN0 函 数 ， 这 个 函数 接收 一 个 参数 ， 确 定 这 个 参数 是 否 “ 不 是 
数值 ”， 该 参数 可 以 是 任何 类 型 。JavaScript 中 有 3 个 函数 可 以 把 非 数 值 转换 为 数值 : 
Number()、parseInt() 和 parseFloat()。 第 一 个 函数 ， 即 转型 函数 Number0 可 以 用 于 任何 数据 
类 型 ， 而 另外 两 个 函数 则 专门 用 于 把 字符 串 转 换 成 数值 。 这 3 个 函数 对 于 同样 的 输入 ， 会 
返回 不 同 的 结果 。 

Number0 函 数 的 转换 规则 如 下 : 

如 果 是 Boolean 值 ，true 和 false 将 分 别 被 替换 为 1 和 0。 
如 果 是 数值 ， 只 是 简单 地 传 入 和 返回 。 
如 果 是 null 值 ， 返 回 0。 
如 果 是 undefined， 返 回 NaN。 
如 果 是 字符 串 ， 则 需要 根据 字符 串 所 含 字 符 来 确定 。 
果 是 字符 串 ， 则 遵循 下 列 规则 : 
如 果 字 符 串 中 只 包含 数值 ， 则 将 其 转换 为 十 进 制 数值 ， 即 1 会 变 成 1，123 会 变 
成 123， 而 011 会 变 成 11( 前 面 的 0 被 忽略 )。 
@ ”如 果 字 符 串 中 包含 有 效 的 浮 点 格式 ， 如 1.1， 则 将 其 转换 为 对 应 的 浮 点 数 (同样 ， 

也 会 忽略 前 面 的 0)。 

@ 如果 字 符 串 中 包含 有 效 的 十 六 进 制 格式 ， 例 如 0xf， 则 将 其 转换 为 相同 大 小 的 十 

进 制 整数 值 。 

@ ”如 果 字 符 串 是 空 的 ， 则 将 其 转换 为 0。 如 果 字 符 串 中 包含 除了 上 述 格式 之 外 的 字 

符 ， 则 将 其 转换 为 NaN。 

如 果 是 对 象 ， 则 调用 对 象 的 valueOfO 函 数 ， 然 后 依照 前 面 的 规则 转换 返回 的 值 。 

如 果 转 换 的 结果 是 NaN， 则 调用 对 象 的 toString0 函 数 ， 然 后 再 依次 按照 前 面 的 规 

则 转换 返回 的 字符 串 值 。 
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1 于 Number() 函 数 在 转换 字符 串 时 比较 复杂 而 且 不 够 合理 ， 因 此 在 处 理 整 数 的 时 候 更 
常用 的 是 parseInt0 函 数 。 
parseInt() 函 数 在 转换 字符 串 时 ， 更 多 的 是 看 其 是 否 符合 数值 模式 。 它 会 忽略 字符 串 前 
面 的 空格 ， 直 至 找到 第 一 个 非 空格 字符 。 具 体 规则 如 下 : 
@ ”如 果 第 一 个 字符 串 不 是 数字 字符 或 者 负 号 ，parseInt0 会 返回 NaN。 也 就 是 说 ， 用 
parseInt() 转 换 空 字 符 串 会 返回 NaN。 
@ ”如 果 第 一 个 字符 是 数字 字符 ，prarseInt0 会 继续 解析 第 二 个 字符 ， 直 到 解析 完 所 有 
后 续 字符 或 者 遇 到 了 一 个 非 数 字 字 符 。 例 如 ，1234blue 会 被 转换 为 1234，22.5 会 
被 转换 为 22， 因 为 小 数 点 并 不 是 有 效 的 数字 字符 。 
@ ”如 果 字 符 串 中 的 第 一 个 字符 是 数字 字符 ，parseInt0 也 能 够 识别 出 各 种 整数 格式 ( 即 
十 进 制 、 八 进 制 、 十 六 进 制 )。 


5.，String 类 型 


String 类 型 用 于 表示 由 零 或 多 个 16 位 Unicode 字符 组 成 的 字符 序列 ， 即 字符 串 。 字 符 
串 可 以 由 单 引 号 或 双 引 号 表示 。 任 何 字 符 串 的 长 度 都 可 以 通过 访问 其 length 属性 取得 。 

要 把 一 个 值 转换 为 一 个 字符 串 ， 有 两 种 方式 。 第 一 种 是 使 用 toString0 函 数 ， 第 二 种 是 
使 用 String0 函 数 。 

(1) toString0 函 数 

数值 、 布 尔 值 、 对 象 和 字符 串 值 都 有 toString0 函 数 。 但 null 和 undefined 值 没 有 这 个 
函数 。 多 数 情况 下 ， 调 用 toString0 函 数 不 必 传递 参数 。 但 是 ， 在 调用 数值 的 toString0 函 数 
时 ， 可 以 传递 一 个 参数 ， 即 输出 数值 的 基数 。 通 过 指定 不 同 的 基数 ，toString0 函 数 会 改变 
输出 的 值 。 

(2) String0 函 数 

在 不 知道 要 转换 的 值 是 不 是 null 或 undefined 的 情况 下 ， 还 可 以 使 用 转型 函数 
String()， 这 个 函数 能 够 将 任何 类 型 的 值 转换 为 字符 串 。String0 函 数 遵 循 下 列 转 换 规则 : 

@ ”如 果 值 有 toString0 函 数 ， 则 调用 该 函数 (没有 参数 ) 并 返回 相应 的 结果 。 

e@ ”如 果 值 是 nul， 则 返回 null。 

@ ”如 果 值 是 undefined， 则 返回 undefined。 


6. Object 类 型 

Object 类 型 是 对 象 类 型 ， 对 象 其 实 就 是 一 组 数据 和 功能 的 集合 。 对 象 可 以 通过 执行 
new 操作 符 后 跟 要 创建 的 对 象 类 型 的 名 称 来 创建 。 而 创建 Object 类 型 的 实例 并 为 其 添加 属 
性 和 (或 ) 函 数 ， 就 可 以 创建 自 定义 对 象 。 如 创建 一 个 名 为 obj 的 对 象 ， 代 码 如 下 : 

Var obj = new Object() 7 


Object 的 每 个 实例 都 具有 下 列 属性 和 函数 。 

@ constructor: 保存 着 用 于 创建 当前 对 象 的 函数 。 

®@ hasOwnProperty(propertyName): 用 于 检查 给 定 的 属性 在 当前 对 象 实例 中 (而 不 是 
在 实例 的 原型 中 ) 是 否 存在 。 作 为 参数 的 属性 名 ，propertyName 必须 以 字符 串 形 式 
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isPrototypeOf(object): 用 于 检查 传 入 的 对 象 是 否 是 另 一 个 对 象 的 原型 。 
propertyIsEnumerable(propertyName): 用 于 检查 给 定 的 属性 是 否 能 够 使 用 for-in 语 
句 来 枚 举 。 

toString0: 返回 对 象 的 字符 串 表示 。 

valueOfO0: 返回 对 象 的 字符 串 、 数 值 或 布尔 值 表示 。 通 常 与 toString0 函 数 的 返回 
值 相同 。 


34 运算 符 


JavaScript 提供 了 丰富 的 运算 功能 ， 包 括 算术 运算 、 关 系 运 算 、 逻 辑 运算 和 连接 运算 。 
本 节 介 绍 JavaScript 中 的 运算 符 。 

1. 算术 运算 符 

JavaScript 中 的 算术 运算 符 有 单 目 运算 符 和 双 目 运算 符 。 双 目 运算 符 包 括 +( 加 )、-( 减 )、 
#( 乘 )、/( 除 )、%( 取 余 )、|( 按 位 或 )、&( 按 位 与 )、<<( 左 移 )、>>( 右 移 ) 等 。 单 目 运算 符 有 -( 取 
反 )、~( 取 补 )、++( 递 加 D)、--( 递 减 1) 等 。 


2. 关系 运算 符 


关系 运算 符 又 称 比较 运算 ， 运 算 符 包括 <( 小 于 )、<=( 小 于 等 于 )、>( 大 于 )、>=( 大 于 等 
于 )、 一 (等于) 和 上 [=( 不 等 于 )， 此 外 还 有 二 = 和 和! 一。 

关系 运算 的 运算 结果 为 布尔 值 ， 如 果 条 件 成 立 ， 则 结果 为 tue， 否 则 为 false。 

对 于 等 同 运算 符 “==” 的 比较 ， 当 两 个 运算 数 的 类 型 不 同时 ， 将 它们 转换 成 相同 的 类 
型 。 其 转换 方式 及 比较 结果 如 下 所 示 : 


对 于 一 个 数值 与 一 个 字符 串 ， 字 符 串 转 换 成 数值 之 后 ， 进 行 比较 。 

true 转换 为 1、false 转换 为 0， 进行 比较 。 

对 于 一 个 对 象 、 数 组 、 函 数 与 一 个 数值 或 字符 串 的 比较 ， 对 象 、 数 组 、 函 数 转换 
为 原始 类 型 的 值 ， 然 后 进行 比较 。 先 使 用 valueofD， 如 果 不 行 就 使 用 toString(O)。 


其 他 类 型 的 组 合 比 较 ， 需 要 两 个 运算 数 类 型 相同 ， 或 转换 成 相同 类 型 后 比较 。 其 比较 


结果 如 下 所 示 : 

e@ ”对 于 两 个 字符 串 ， 如 果 同 一 位 置 上 的 字符 相等 ， 这 两 个 字符 串 就 相同 。 

@ ”对 于 两 个 数 ， 两 数 相 同 就 相同 。 如 果 一 个 是 NaN 或 两 个 都 是 NaN， 则 不 相同 。 

@ ”如 果 两 个 都 是 tue， 或 者 两 个 都 是 false， 则 相同 。 

@ ”如 果 两 个 引用 的 是 同一 个 对 象 、 函 数 、 数 组 ， 则 相等 ， 如 果 引 用 的 不 是 同一 个 对 
象 、 函 数 、 数 组 ， 则 不 相同 ， 即 使 这 两 个 对 象 、 函 数 、 数 组 可 以 转换 成 完全 相等 
的 原始 值 。 

@ ”如 果 是 两 个 null， 或 者 两 个 都 是 未 定义 的 ， 那 么 它们 相等 。 


在 JavaScript 中 ，“=” 是 全 同 运 算 符 ， 只 有 当 值 相等 ， 数 据 类 型 也 相等 时 才 成 立 。 


全 同 运 算 符 遵循 等 同 运算 符 的 比较 规则 ， 但 是 它 不 对 运算 数 进行 类 型 转换 ， 当 两 个 运算 数 
的 类 型 不 同时 ， 返 回 false; 只 有 当 两 个 运算 数 的 类 型 相同 的 时 候 ， 才 遵循 等 同 运算 符 的 比 
较 规 则 进行 比较 。 
3， 逻辑 运算 符 
逻辑 运算 符 有 : &&( 罗 辑 与 )、||( 罗 辑 或 )、!( 取 反 ， 罗 辑 非 )、^( 逻 辑 异 或 )。 
4. 字符 串 连 接 运算 符 
连接 运算 用 于 字符 串 操作 ， 运 算 符 为 +( 用 于 强制 连接 )， 将 两 个 或 多 个 字符 串 连接 为 一 
个 字符 串 。 
5. 三 目 运算 符 
三 目 运算 符 “? :” 是 另 一 种 比较 类 型 ， 其 格式 为 : 
操作 数 ? 表达 式 1 : 表达 式 2 
对 于 三 目 运算 符 “? :” 构 成 的 表达 式 ， 其 逻辑 功能 为 ， 若 操作 数 的 结果 为 tue， 则 表 
述 式 的 结果 为 表达 式 1， 否 则 为 表达 式 2。 例 如 max=(a>b)? a : b; 该 语句 的 功能 就 是 将 a、 
b 中 的 较 大 的 数 赋 给 max。 
【 例 3.4】 
计算 半径 为 4 的 圆 形 的 周 长 和 面积 ， 使 用 三 目 运算 符 比较 圆 形 的 周 长 和 面积 并 输出 其 
中 较 大 的 值 。 代 码 如 下 : 
<script> 
Var area = 3.14 * 4* 4; 
var len =2* 3.14* 4; 
document .write (" 圆 的 面积 值 :" + area + "<br/>"); 
document .write (" 圆 的 周 长 值 :" + len + "<br/>"); 
var max = (area > len) ? " 圆 的 面积 值 比较 大 ” : " 圆 的 周 长 值 比较 大 " 


document .write (max) 
</script> 


上 述 代码 的 执行 结果 如 图 3-4 所 示 。 
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图 3-4 圆 的 比较 


3.5_ JavaScript 语句 的 类 型 


有 其 他 编程 语言 基础 的 读者 应 该 知道 ， 程 序 开发 语言 都 有 着 非 顺序 执行 的 语句 ， 这 种 


吊 壕 入 垩 1duoSenef 册 人 小 仿 


下 
亲生 理 哥 作 刊 
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语句 包括 选择 语句 、 循 环 语句 、 跳 转 语句 等 。 本 节 详 细 介 绍 JavaScript 中 的 其 他 类 型 语句 


及 


其 上 


法 。 


8.1 选择 语句 


选择 语句 用 于 执行 满足 指定 条 件 的 动作 。 如 登录 系统 时 的 验证 ， 当 用 户 名 密码 正确 时 
便 可 进入 系统 ， 但 只 要 密码 有 误 ， 就 不 能 进入 系统 。 这 是 一 种 选择 ， 在 不 同 的 状态 下 系统 
接 下 来 执行 不 同 的 操作 。 

JavaScript 提供 了 多 种 选择 语句 类 型 ， 以 满足 不 同 的 程序 需求 ， 如 下 所 示 。 


地 
下 


让 语句 当 满 足 条 件 时 执行 。 

if-else 语句 : 当 满 足 条 件 时 执行 耻 后 的 语句 ， 否 则 执行 else 后 的 语句 。 
if-else-if-else-if 语句 : 当 满 足 条 件 时 执行 让 后 的 语句 ， 否 则 满足 第 2 个 条 件 执行 
else 站 后 的 语句 ， 否 则 满足 第 3 个 条 件 执行 下 一 个 else 站 后 的 语句 。 

switch-case 语句 : 不 同 条 件 下 执行 不 同 语句 。 


让 语句 


语句 执行 时 ， 首 先 判断 条 件 表 达 式 是 否 为 真 : 条 件 为 真 则 执行 下 语句 下 的 语句 块 ， 


结束 条 件 语句 ; 条 件 为 假 则 直接 结束 条 件 语句 块 ， 执 行 if 语句 块 后 面 的 语句 。 其 语法 格式 
如 下 所 示 : 
if (条 件 ) 


ES 


} 


// 只 有 当 条 件 为 true 时 执行 的 代码 


【 例 3.5】 
定义 两 个 变量 值 numl 和 num2， 赋 值 为 12 和 16。 比 较 两 个 值 的 大 小 ， 若 numl 大 则 


出 “numl 比较 大 ”; 若 num2 大 则 输出 “num2 比较 大 ”。 


代码 如 下 : 


<script> 


var numl=12,num2=16; 


if (numl>num2) 


; document .write ("numl 比较 大 ") > 

有 

if (num2>num1l) 

document .write ("num2 比较 大 ") ; 
ee ee 


上 述 代码 的 执行 结果 如 图 3-5 所 示 。 可 以 看 出 ， 上 述 代码 没有 执行 这 numl>num2) 后 


面 的 语句 ， 而 是 执行 了 ifnum2>numl) 后 面 的 语句 。 


CO 


SEE 
J | localhost3196/Htmlpag x WO 


| © | D localhost:3196/HtmlPage3.html 


num2 比 较 大 


3-5 if 语句 的 执行 效果 


叫 淅 尘 置 lduoSener 志波 忆 


2. felse 语 句 


if-else 语句 在 if 语句 的 基础 上 添加 了 当 条 件 不 满足 时 进行 的 操作 。 条 件 的 成 立 只 有 两 
种 可 能 ， 即 成 立 和 不 成 立 。if-else 语句 在 条 件 表 达 式 成 立时 与 让 语句 一 样 执行 下 后 的 语句 
块 1， 并 结束 条 件 语句 ， 条 件 表达 式 不 成 立时 ， 执 行 else 后 的 语句 块 2， 执 行 完 成 后 结束 
条 件 语句 。 语 法 如 下 : 

if (条 件 ) 

; // 当 条 件 为 true 时 执行 的 代码 

} 


else 
{ 
// 当 条 件 不 为 true 时 执行 的 代码 
} 
【 例 3.6】 
修改 例 3.5 中 的 代码 为 ， 比 较 两 个 值 的 大 小 ， 若 numl 大 则 输出 “numl 比较 大 ”; 否 
则 输出 “num2 比较 大 ”。 
代码 如 下 
<script> 
var numl = 12, num2 = 16; 


if (numl>num2) 


{ 
document .write ("numl 比较 大 "); 
j 
else 
{ 
document .write ("num2 比较 大 ") ; 
} 
</script> 


执行 上 述 代 码 ， 其 效果 如 图 3-5 所 示 。 与 例 3.5 的 执行 效果 完全 一 样 。 由 图 3-5 可 以 看 
出 ， 上 述 代码 没有 执行 这 numl>num2) 后 面 的 语句 ， 而 是 执行 了 else 后 面 的 语句 。 
3. if-else-if-else 


if-else-if-else 语句 相对 复杂 ， 它 提供 了 多 个 条 件 来 筛选 数据 ， 将 数据 依次 分 类 排除 。 
程序 流程 如 图 3-6 所 示 。 


局 
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条 件 为 真一 站 语句 块 1 


条 件 为 候 一 一 一 >| 语句 块 4 结 


3-6 ”if-else-if-else 语 句 的 流程 


图 3-6 中 ，if-else-if-else 语句 在 程序 进入 语句 时 ， 首 先 判定 第 一 个 直下 的 条 件 1: 

@ 条件 1 成立， 执行 语句 块 1 并 结束 条 件 语句 。 

@ 条 件 1 不成立， 判断 条 件 2， 条 件 2 成立， 执行 语句 块 2 并 结束 条 件 语句 。 

@ 条 件 2 不 成 立 ， 判 断 条 件 3， 条 件 3 成 立 ， 执 行 语句 块 3 并 结束 条 件 语句 。 

@ 条件 3 不 成 立 ， 执 行 语句 块 4 并 结束 条 件 语句 。 

图 中 只 有 3 个 条 件 和 一 个 else 语句 。 在 felse-if-else 语句 中 ， 条 件 可 以 是 任意 多 个 ， 
但 else 语句 小 于 等 于 1 个 。 即 else 语句 可 以 不 要 ， 也 可 以 要 ， 要 的 话 只 能 有 1 个 ， 因 为 条 
件 只 有 成 立 和 不 成 立 两 种 结果 。 其 语法 结构 如 下 所 示 : 

if (条 件 1) 
// 当 条 件 1 为 true 时 执行 的 代码 
else if (条 件 2) 
// 当 条 件 2 为 true 时 执行 的 代码 


else 


// 当 条 件 1 和 条 件 2 都 不 为 true 时 执行 的 代码 


【 例 3.7】 
中 国 的 大 多 数 地 区 ， 冬 季 分 布 在 12 月 份 、1 月 份 和 2 月 份 ; 春季 分 布 在 3~5 月 份 。 创 
建 月 份 变量 ， 并 根据 月 份 判断 所 处 的 季节 ， 代 码 如 下 : 
<script> 
var numl = 4; 
if (numl == 12 || numl == 1 || numl == 2) 
{ 


document -write ("冬天 "); 


else if (numl>2 && numl<6) 
document .write ("春天 "); 
} 
else if (numl>5 && numl<9) 
i 
document .write ("夏天 "); 
} 
else 


{ 


叫 注 守 置 1duoSeAer 册 人 小 注 


document .write ("秋天 "); 


} 
</script> 
上 述 代 码 中 ， 由 于 12 月 份 、1 月 份 和 2 月 份 并 不 连续 ， 因 此 需要 使 用 “或 ”逻辑 运算 
符 来 连接 : 剩 下 的 月 份 使 用 “与 ”逻辑 运算 符 链 接 。 根 据 月 份 判断 并 输出 当前 季节 ， 其 执 
行 结果 为 “春天 ”。 由 执行 结果 可 以 看 出 ， 程 序 在 执行 时 跳 过 了 不 符合 条 件 的 语句 ， 而 直 
接 执行 else 让 (numl>2 && num1<6) 下 的 语句 。 


4. switch 语 句 


switch 语句 的 完整 形式 为 switch ... case ... default。switch 语句 与 让 else- 这 语句 用 法 相 
似 ， 但 switch 语句 中 使 用 的 条 件 只 能 是 确定 的 值 ， 即 条 件 表 达 式 等 于 某 个 常量 ， 不 能 使 用 
范围 。switch 语句 的 流程 如 图 3-7 所 示 。 


A 条 件 成 立 一 语句 块 1 


不 瞩 立 


条 件 成 立 一 语句 块 2 结束 


不 成 立 


图 3-7 ”switch 语句 的 流程 


图 3-7 中 ，switch 语句 在 程序 进入 语句 时 ， 首 先 判定 第 一 个 常量 1 是 否 与 条 件 相等 。 
常量 可 以 是 具体 数值 ， 也 可 以 是 表达 式 。 


@ 条件 与 常量 1 相等 : 执行 语句 块 1 并 结束 条 件 语句 。 
@ 条件 与 常量 2 相等 : 执行 语句 块 2 并 结束 条 件 语句 。 
@ 条件 与 常量 3 相等 : 执行 语句 块 3 并 结束 条 件 语句 。 
@ ”条 件 与 三 个 常量 都 不 相等 :执行 语句 块 4 并 结束 条 件 语句 。 
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图 3-7 中 只 有 3 个 条 件 表达 式 和 一 个 default 语句 。default 语句 表示 剩余 的 情况 下 ， 与 
else 类 似 。 

与 下 else-if 语句 一 样 ， 条 件 常量 可 以 是 任意 多 个 ，default 语句 可 以 不 要 ， 也 可 以 要 ， 
要 的 话 只 能 有 1 个 ， 因 为 条 件 只 有 成 立 和 不 成 立 两 种 结果 。 

switch 语句 的 基本 语法 如 下 : 


Switch (n) 
| 
case 1: 
// 执 行 语句 块 1 
break; 
Case 2: 
// 执 行 语句 块 2 
break; 
default: 
// 与 case 1 和 case 2 不 同时 执行 的 语句 
| 


【 例 3.8】 
一 周 有 7 天 ， 创 建 变量 ， 为 其 指定 1~7 之 间 的 数字 ， 并 通过 switch 语句 检测 变量 的 
输出 对 应 的 一 周 中 的 星期 几 ， 如 数字 1 对 应 “星期 一 ”。 代 码 如 下 : 


<script> 
var week = 4; 
switch (week) { 
case 1: 
document .write ("星期 一 "); 
break; 
case 2: 
document .write ("星期 二 "); 
break; 
. // 省 略 部 分 代码 
case 6: 
document .write (" 星 期 六 ") 
break; 
default: 
document .write ("星期 天 "); 
break; 


值 


1 
</script> 
上 述 代 码 省 略 了 变量 为 3、4、5 的 语句 ， 可 参考 变量 为 2 时 的 代码 。 上 述 语句 除了 
switch 语句 的 构成 ， 还 有 break 关键 字 ， 该 关键 字 表 示 跳 出 当前 的 选择 语句 ， 其 执行 结果 
为 “星期 四 ”。 
若 不 使 用 break 关键 字 ， 上 述 代 码 将 输出 “星期 四 、 星 期 五 、 星 期 六 、 星 期 天 ”， 即 
把 满足 条 件 后 所 有 的 语句 都 执行 一 次 。break 属于 跳 转 语句 ， 将 在 本 章 3.5.3 节 介绍 。 


3.5.2 ”循环 语句 
循环 语句 用 于 重复 执行 特定 语句 块 ， 直 到 循环 终止 条 件 成 立 或 遇 到 跳 转 语句 。 程 序 中 


经 常 需要 将 一 些 语句 重复 执行 ， 如 果 使 用 基本 语句 顺序 地 执行 ， 将 使 开发 人 员 重 复工 作 ， 
影响 效率 。 

例如 ， 对 于 1+2+3+...+100， 使 用 顺序 语句 需要 将 100 个 数 相 加 ; 车 加 至 1000、10000 
或 更 大 的 数 ， 使 得 数据 量 加 大 ， 容 易 出 错 ， 不 便 管理 。 

使 用 循环 语句 可 以 简化 这 种 过 程 ， 将 指定 语句 或 语句 块根 据 条 件 重复 执行 。 循 环 语句 
分 为 以 下 两 种 : 

@ for 循环 重复 执行 一 个 语句 或 语句 块 ， 但 在 每 次 重复 前 ， 将 会 验证 循环 条 件 是 否 


驯 形 入 晋 1duoSeAef 坤 6 泪 驴 


仍然 成 立 。 
@ ”while 循环 语句 指定 在 特定 条 件 下 重复 执行 一 个 语句 或 语句 块 。 
1. for 循 环 


for 循环 在 重复 执行 的 语句 块 之 前 加 入 循环 执行 条 件 ， 循 环 条 件 通常 用 来 限制 循环 次 


数 ， 执 行 流程 如 图 3-8 所 示 。 


条 件 不 成 立 


条 件 成 立 一 ”语句 块 


3-8 “for 循环 的 执行 流程 


如 图 3-8 所 示 ， 从 开始 进入 ， 判 断 循环 条 件 是 否 成 立 : 若 成 立 ， 执 行 语句 块 ， 并 重新 
判断 循环 条 件 是 否 成 立 ; 若 不 成 立 ， 结 束 这 个 循环 。 语 法 格式 如 下 : 

for (< 初始 化 >; < 条 件 表达 式 >; < 增 量 >) { 

// 语 句 块 

} 

for 语句 执行 括号 里 面 语句 的 顺序 如 下 。 

(1) 首先 是 初始 化 的 语句 ， 如 var num=0; 若 for 循环 之 前 已 经 初始 化 ， 可 以 省 略 初始 
化 表达 式 ， 但 不 能 省 略 分 号 。 

(2) 接着 是 条 件 表 达 式 ， 如 num<5; 表达 式 决定 了 该 循环 将 在 何 时 终止 。 表 达 式 可 以 
省 略 ， 但 省 略 条 件 表达 式 ， 该 循环 将 成 为 无 限 死 循环 。 

(3) 最 后 是 增 量 ， 通 常 是 针对 循环 中 初始 化 变量 的 增 量 ， 如 num++; 增 量 与 初始 值 和 
表达 式 共同 决定 了 循环 执行 的 次 数 。 增 量 可 以 省 略 ， 但 省 略 的 增 量 将 导致 循环 无 法 达到 条 
件 表 达 式 的 终止 ， 因 此 需要 在 循环 的 语句 块 中 修改 变量 值 。 

增 量 表达 式 后 不 需要 分 号 ， 因 for 语句 0 内 的 3 个 表达 式 均 可 以 省 略 ， 表 达 式 间 的 分 号 
不 能 省 略 ， 因 此 有 以 下 空 循 环 语句 : 

EoF 2 2 

{ 

} 
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【 例 3.9】 
定义 整 型 变量 num， 计 算 1+2+3+4+...+1000 的 数值 并 赋值 给 num， 输 出 num 的 值 。 使 
用 for 循环 语句 如 下 : 
<script> 


var num = 0; 
for (var x=1; x<=1000; x++) { 
num = num + x; 
下 
document .write (num); 
</script> 


上 述 代码 的 执行 结果 为 “500500”。 
2.，while 语 句 


while 语句 在 条 件 表达 式 判 定之 后 执行 循环 ， 与 for 循环 的 执行 顺序 一 样 。 不 同 的 是 语 
句 格式 和 适用 范围 。 
while 的 使 用 比较 灵活 ， 甚 至 在 某 些 情况 下 能 替代 条 件 语 句 和 跳 转 语句 。while 循环 的 


流程 如 图 3-9 所 示 。 


条 件 不 成 


3-9 ”while 循环 语句 的 流程 


图 3-9 中 ， 执 行 至 while 语句 时 首先 判断 循环 条 件 是 否 成 立 : 若 成 立 ， 执 行 语句 块 ， 
并 重新 判断 循环 条 件 是 否 成 立 ， 若 不 成 立 ， 结 束 这 个 循环 。 语 法 格式 如 下 : 

while (条 件 表达 式 ) { 

// 语 句 块 

} 

从 while 的 使 用 格式 可 以 看 出 ，while 的 使 用 与 for 很 接近 ， 满 足 条 件 表达 式 即 执行 
while 语句 块 ， 否 则 结束 循环 。 

while 后 的 括号 0 只 能 使 用 一 个 条 件 表达 语句 ， 若 在 循环 中 不 改变 条 件 表 达 式 中 的 变量 
值 ， 循 环 将 无 限 进行 下 去 ， 因 此 循环 语句 块 中 包含 改变 变量 值 的 语句 。 

for 主要 控制 循环 的 次 数 ， 而 对 于 不 确定 次 数 的 循环 ， 使 用 while 比较 合适 。 如 同样 计 
算 1~1000 这 1000 个 数 的 和 ， 使 用 while 的 情况 如 例 3.10 所 示 。 


【 例 3.10】 
定义 整 型 变量 num， 计 算 1+2+3+4+...+1000 的 数值 并 赋值 给 num， 和 输出 num 的 值 。 使 
用 while 循环 语句 如 下 : 


Ne 


<script> 
var i=0,num=0; 
while(i<=1000) 


{ 
num = num + i; 
3 
下 
document .write (num); 
</script> 


叫 壕 冉 亚 duosener 协 6 溃 锐 


运行 上 述 代 码 ， 其 结果 与 例 3.9 的 结果 一 样 。 代 码 中 ，i 变量 在 循环 中 改变 了 数值 ， 否 
则 循环 将 永远 进行 下 去 ，document.write(num):; 语 句 将 无 法 被 执行 。 


3.5.3” 跳 转 语句 


例 3.8 中 使 用 的 break 语句 即 为 跳 转 语句 ， 若 不 使 用 该 语句 ， 程 序 运行 时 在 跳 过 输出 
星期 一 到 星期 三 之 后 ， 将 执行 输出 星期 四 以 及 之 后 的 所 有 输出 函数 。JavaScript 中 的 跳 转 语 
句 有 两 种 ，break 语句 和 continue 语句 。 

1.， break 语 句 


break 语句 只 能 用 在 循环 或 switch 中 。 循 环 有 多 种 ， 任 意 一 种 循环 都 可 以 使 用 break 跳 
出 。break 有 以 下 两 种 用 法 : 

@ ”用 在 switch 语句 的 case 语 名 之后， 结束 switch 语句 块 ， 执 行 switchf} 后 的 语句 。 

e ”用 在 循环 体 ， 结 束 循环 ， 执 行 循环 们 后 的 语句 。 


2.，continue 语 句 


continue 语句 是 跳 转 语句 的 一 种 ， 用 在 循环 中 可 以 加 速 循环 ， 但 不 能 结束 循环 。 
continue 语句 与 break 的 不 同 之 处 在 于 : 
@ continue 语句 不 能 用 于 选择 语句 。 
@ continue 语句 在 循环 中 不 是 跳出 循环 块 ， 而 是 结束 当前 循环 ， 进 入 下 一 个 循环 ， 
忽略 当前 循环 的 剩余 语句 。 
【 例 3.11】 
输出 30 以 内 的 整数 ， 在 输出 时 跳 过 5 的 倍数 ， 并 在 达到 5 的 倍数 时 换行 ， 使 用 循环 
语句 和 选择 语句 的 网 套 ， 代 码 如 下 : 
<script> 
for (var i=1? i<30? i++) { 
if (i%5 == 0) { 
document .write ("<br/>"); 
continue; 
} 
1 二 
document .write("gnbsp;" + i + "gnbsp;"); 


和 


BEse | 
document .write (i); nN 
document .write ("gnbsp;"); WW 

> Y 
EN) 
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} 


} 
</script> 


上 述 代码 的 执行 效果 如 图 3-10 所 示 。 程 序 在 执行 到 5 的 倍数 时 中 止 ， 但 该 循环 并 没有 
被 跳出 ， 而 是 接着 执行 后 面 的 循环 。 
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3-10 ”使 用 continue 的 执行 效果 


将 代码 中 的 continue 改 为 break， 其 执行 效果 如 图 3-11 所 示 。 
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3-11 使 用 break 的 执行 效果 


由 图 3-11 可 以 看 出 ， 程 序 在 执行 到 5 的 倍数 时 彻底 中 断 ， 该 循环 被 直接 跳出 ， 没 有 接 
着 执行 为 6 的 情况 。 


3.5.4 和 所 异常 处 理 语句 


程序 中 不 可 避免 地 存在 无 法 预知 的 反常 情况 ， 这 种 反常 称 为 异常 。JavaScript 为 处 理 在 
程序 执行 期 间 可 能 出 现 的 异常 提供 了 内 置 支持 ， 由 正常 控制 流 之 外 的 代码 处 理 。 

本 节 介 绍 JavaScript 内 置 的 异常 处 理 ， 包 括 使 用 throw 抛 出 异常 ， 使 用 try 尝试 执行 代 
码 ， 并 在 失败 时 使 用 catch 处 理 异 常 。 

当 错 误 发 生 时 ，JavaScript 引擎 通常 会 停止 ， 并 生成 一 个 错误 消息 。 把 throw、try 和 
catch 一 起 使 用 ， 可 以 控制 程序 流 ， 并 生成 自 定义 的 错误 消息 。throw、try 和 catch 有 以 下 
儿 个 特点 : 

@ try 语句 允许 定义 在 执行 时 进行 错误 测试 的 代码 块 。 

@ catch 语句 允许 定义 当 try 代码 块 发 生 错误 时 所 执行 的 代码 块 。 

@ JavaScript 语句 try 和 catch 是 成 对 出 现 的 。 

@ throw 语句 用 于 发 出 在 程序 执行 期 间 出 现 异 常 的 信号 。 

throw 语句 将 引发 异常 ， 当 异常 引发 时 ， 程 序 查 找 处 理 此 异常 的 catch 语句 。 也 可 以 用 
throw 语句 重新 引发 已 捕获 的 异常 。throw 只 是 用 在 程序 中 的 一 条 语句 ， 语 法 如 下 : 


throw exception 


上 述 代码 中 ， 异 常 可 以 是 JavaScript 字符 串 、 数 字 、 轩 辑 值 或 对 象 。 
把 throw、try 和 catch 一 起 使 用 ， 语 法 如 下 : 


try 
{ 

// 在 这 里 运行 代码 

throw exception // 抛 出 异常 
} 


catch (err) 


// 在 这 里 处 理 错误 
} 
【 例 3.12】 
定义 变量 x， 判 断 该 变量 的 值 是 否 为 空 、 是 否 不 是 数字 或 是 否 太 大 和 太 小 ， 根 据 不 同 
的 情况 抛 出 不 同 的 异常 ， 并 处 理 该 异常 ， 代 码 如 下 : 
<script> 


二 昌 人 


Ca | 
(on rn 人 为 守 
if (isNaN (x)) { throw "不 是 数字 "; } 
Ee > DN Enrow mk 
(row oA 小 m0 

} 

catch (err) { 
document .write (err); 


} 
</script> 


上 述 代 码 的 执行 效果 为 “ 值 为 室 ”， 该 异常 是 当 x 一 “时 抛 出 的 异常 ， 被 catch 语句 处 
理 时 输出 。 


3.6 对 象 


JavaScript 中 的 所 有 事物 都 是 对 象 ， 包 括 : 字符 串 、 数 字 、 数 组 、 日 期 ， 等 等 。 在 
JavaScript 中 ， 对 象 是 拥有 属性 和 函数 的 数据 。 


G6.1 对 象 概述 


有 过 其 他 编程 语言 基础 的 读者 应 该 知道 ， 在 面向 对 和 象 编程 语言 中 有 类 和 对 象 的 概念 。 将 
有 相同 数据 和 操作 的 语句 放 在 一 个 类 中 ， 通 过 对 类 的 实例 化 来 调用 类 里 面 的 数据 和 操作 。 
这 些 数据 作为 类 的 属性 ， 方 法 作为 类 的 函数 ， 共 同 定义 一 系列 相关 的 数据 和 操作 。 

如 长 方 体 是 生活 中 的 一 个 对 象 ， 该 对 象 可 以 有 长 度 、 宽 度 和 高 度 这 些 数据 ， 有 求 表面 
积 、 体 积 、 棱 长 等 这 些 操作 ， 将 这 些 数据 定义 为 长 方 体 对 象 的 属性 ， 将 这 些 操作 定义 为 长 
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方 体 对 象 的 函数 ， 那 么 一 切 与 长 方 体 有 关 的 操作 就 都 可 以 直接 调用 这 个 对 象 了 。 
JavaScript 本 身 并 不 支持 面向 对 象 ， 它 没有 访问 控制 符 ， 没 有 定义 类 的 关键 字 class， 
没有 支持 继承 的 extend 或 冒号 ， 也 没有 用 来 支持 虚 函 数 的 virtual， 不 过 ，JavaScript 是 一 
门 灵活 的 语言 ， 能 够 以 其 他 形式 完成 类 和 对 象 的 功能 
在 JavaScript 中 对 象 是 一 种 数据 (变量 )， 拥 有 属性 和 函数 。 当 声明 一 个 JavaScript 变量 
如 “var txt=“Hello”;” 时 ， 实 际 上 已 经 创建 了 一 个 JavaScript 字符 串 对 象 。 字 符 串 对 象 拥有 
内 建 的 属性 length。 对 于 上 面 的 字符 串 来 说 ，length 的 值 是 5。 字符 串 对 象 同时 拥有 若干 个 
内 建 的 函数 。 
在 面向 对 象 的 语言 中 ， 属 性 和 函数 常 被 称 为 对 象 的 成 员 。JavaScript 中 几乎 所 有 事务 都 
是 对 象 : 字符 串 、 数 字 、 数 组 、 日 期 、 函 数 等 。 
对 象 的 名 称 由 用 户 定义 ， 在 创建 时 使 用 new 关键 字 和 Object0 函 数 ， 如 声明 一 个 名 为 
person 的 对 象 ， 同 时 为 其 添加 属性 ， 代 码 如 下 : 
Var person = new Object(); 
person.name = "Bil1"7 
person.age = 56; 
创建 新 JavaScript 对 象 时 可 以 包含 多 个 函数 ， 对 于 已 经 存在 的 对 象 ， 可 以 添加 属性 和 
函数 。 对 象 中 属性 和 函数 的 调用 需要 用 “对 象 名 .属性 名 ”或 “对 象 名 .函数 名 ”的 方式 来 
进行 。 如 例 3.13 定义 了 一 个 圆 形 对 象 。 
【 例 3.13】 
创建 圆 形 对 象 ， 为 其 指定 半径 为 5、 计 算 其 周 长 和 面积 并 定义 为 对 象 的 属性 ， 输 出 圆 
的 周 长 和 面积 ， 代 码 如 下 : 
<script> 
Var round = new Object(); 
round.r = 5; 
round.1 人 234 Tonndera 
round.s 14 round:r * Tounder? 
document .write (" 圆 的 周 长 : " + round.1 + "<br/>"); 


document .write (" 圆 的 面积 : " + round.s); 
</script> 


上 述 代 码 的 执行 效果 如 图 3-12 所 示 。 
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图 3-12 对 象 的 属性 显示 


例 3.13 只 是 定义 了 一 个 对 象 中 国定 的 一 些 数据 ， 而 车 要 在 JavaScript 中 实现 类 一 样 的 
功能 ， 能 够 拥有 数据 和 操作 ， 能 够 被 封装 和 继承 ， 需 要 使 用 函数 的 定义 ， 这 些 将 在 本 章 
3.6.2 小 节 和 3.6.3 小 节 中 介绍 。 


3.6.2 ”函数 


函数 在 多 种 程序 开发 语言 中 都 有 使 用 ， 而 且 函 数 的 定义 和 使 用 方法 相似 。 函 数 是 由 事 
件 驱 动 的 或 者 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 ， 在 JavaScript 中 定义 函数 时 使 用 
function 关键 字 ， 格 式 如 下 : 


function functionname () 


叫 注 尘 团 1duoSeAer 册 人 小 注 


// 这 里 是 要 执行 的 代码 
} 
上 述 代 码 定义 了 函数 functionname()， 当 调用 该 函数 时 ， 会 执行 函数 内 的 代码 。 函 数 定 
义 之 后 ， 可 以 在 某 事件 发 生 时 直接 调用 函数 (比如 当 用 户 单 击 按钮 时 )， 也 可 以 由 JavaScript 
在 任何 位 置 进行 调用 。 


2 提示 : JavaScript 对 大 小 写 敏 感 。 关 键 词 function 必须 是 小 写 的 ， 并 且 必 须 以 与 函 
数 名 称 相同 的 大 小 写 来 调用 函数 。 


在 调用 函数 时 可 以 向 其 传递 值 ， 这 些 值 被 称 为 参数 。 参 数 作为 函数 内 部 的 变量 来 使 
用 ， 定 义 一 个 函数 的 多 个 参数 时 ， 使 用 逗号 隔 开 。 参 数 在 声明 时 不 需要 使 用 var 关键 字 ， 
如 声明 含有 两 个 参数 的 函数 myFunction0， 代 码 如 下 : 

function myFunction (varl, var2) 

// 这 里 是 要 执行 的 代码 

} 

变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 是 第 一 个 被 传递 的 参数 的 给 定 的 

函数 是 可 以 有 返回 值 的 ， 返 回 值 使 用 retum 语句 来 实现 ， 在 使 用 retum 语句 时 ， 函 数 
会 停止 执行 ， 并 返回 指定 的 值 。 

【 例 3.14】 

将 例 3.13 中 的 对 象 定义 为 函数 ， 将 半径 定义 为 函数 的 参数 ， 函 数 返回 值 为 圆 的 面积 。 
定义 之 后 引用 该 函数 ， 代 码 如 下 : 

<script> 


function round(r) { 
EOEUEm 全。 于 二 二 于 和 证 


i "+ round(5)); 
</script> 
上 述 代码 首先 定义 了 函数 round(r)， 并 在 函数 内 以 rf 为 圆 的 半径 计算 圆 的 面积 。 接 着 在 
函数 外 部 对 函数 进行 调用 ， 为 函数 的 参数 赋值 5 并 输出 ， 计 算出 圆 的 面积 ， 如 图 3-13 所 示 。 
在 函数 的 内 部 和 外 部 都 可 以 使 用 变量 ， 但 不 同 的 是 ， 函 数 内 部 的 变量 属于 局 部 变量 ， 
而 函数 外 部 的 变量 使 用 全 局 变量 。 
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3-13 ” 圆 的 面积 函数 调用 


局 部 JavaScript 变量 有 如 下 特点 : 

在 JavaScript 函数 内 部 声明 的 变量 (使 用 var) 是 局 部 变量 ， 所 以 只 能 在 函数 内 部 访 
问 它 。 该 变量 的 作用 域 是 局 部 的 。 

可 以 在 不 同 的 函数 中 使 用 名 称 相同 的 局 部 变量 ， 因 为 只 有 声明 过 该 变量 的 函数 才 
能 识别 出 该 变量 。 

JavaScript 变量 的 生命 期 从 它们 被 声明 的 时 间 开 始 ， 只 要 函数 运行 完毕 ， 本 地 变 
量 就 会 被 删除 。 

全 局 JavaScript 变量 有 如 下 特点 : 

在 函数 外 声明 的 变量 是 全 局 变量 ， 网 页 上 的 所 有 脚本 和 函数 都 能 访问 它 。 

全 局 变量 会 在 页 面 关 闭 后 被 删除 。 


3.6.3 ”构造 函数 


在 JavaScript 中 可 以 对 函数 进行 实例 化 ， 其 效果 相当 于 类 的 实例 化 。 函 数 的 实例 化 同 
样 是 使 用 new 关键 字 ， 而 且 在 函数 中 可 以 有 数据 ， 这 些 数 据 可 以 像 类 的 属性 一 样 使 用 ， 如 
例 3.15 所 示 。 

【 例 3.15】 

构造 圆 的 函数 ， 有 成 员 : 半径 r、 周 长 1 和 面积 s。 在 函数 以 外 为 函数 创建 对 象 ， 获 取 
其 周 长 和 面积 的 值 并 输出 ， 代 码 如 下 : 


<script> 


function round() { 
this.r = 6; 
thisey = 314 2 * this-rs 
Eas = 
} 


Var area = new round(); 


document .write (" 圆 的 面积 : " + area.s + "<br/>"); 
document .write (" 圆 的 周 长 : " + area.1); 


</script> 


在 上 述 代码 中 ， 函 数 的 成 员 都 使 用 this 关键 字 来 定义 ， 表 示 该 属性 是 共有 的 。 若 直接 


，100 


定义 “var r+ = 6:”， 那 么 该 成 员 是 私有 的 ， 在 函数 外 部 将 无 法 访问 到 。 上 述 代码 的 执行 效 
果 如 图 3-14 所 示 。 
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3.7 常用 对 象 


JavaScript 提供 了 内 置 的 对 象 以 实现 特定 的 功能 ， 其 常用 对 象 有 数组 对 象 、 窗 体 对 象 和 
DOM 对 象 等 。 本 节 详 细 介绍 JavaScript 内 置 对 象 的 使 用 。 


C321 Array 对 象 


Array 对 象 是 JavaScript 中 的 数组 对 象 ， 实 现 数组 的 相关 操作 。 数 组 允许 在 单个 变量 中 
存储 多 个 值 ， 其 创建 语法 如 下 所 示 : 


new Array(); 
new Array (size); 
new Array (element0, elementl1l, ..., elementn); 


上 述 代 码 中 ， 参 数 size 是 期 望 的 数组 元 素 个 数 。 参 数 element0...elementn 是 参数 列 
表 。 当 使 用 这 些 参数 来 调用 构造 函数 Array0 时 ， 新 创建 的 数组 的 元 素 就 会 被 初始 化 为 这 些 
值 。 它 的 长 度 (元 素数 目 ) 也 会 被 设置 为 参数 的 个 数 。 
如 果 调 用 构造 函数 Array0O 时 没有 使 用 参数 ， 那 么 返回 的 数组 为 空 ， 元 素数 目 为 0。 
如 果 调 用 构造 函数 时 只 传递 给 它 一 个 数字 参数 ， 该 构造 函数 将 返回 具有 指定 个 数 、 元 
素 为 undefined 的 数组 。 
当 其 他 参数 调用 Array0 时 ， 该 构造 函数 将 用 参数 指定 的 值 初始 化 数组 。 
当 把 构造 函数 作为 函数 调用 ， 不 使 用 new 运算 符 时 ， 它 的 行为 与 使 用 new 运算 符 调用 
它 时 的 行为 完全 一 样 。 

Array 对 象 有 以 下 3 个 属性 。 

@ constructor: 返回 对 创建 此 对 象 的 数组 函数 的 引用 

@ “length: 设置 或 返回 数组 中 元 素 的 数目 。 

@ ”prototype: 使 开发 人 员 有 能 力 向 对 象 添加 属性 和 方法 。 

Array 对 象 有 着 对 数组 的 操作 ， 其 所 包括 的 方法 如 表 3-2 所 示 。 


表 3-2 Array 对 象 的 方法 


方法 名 称 说 明 
concat! 连接 两 个 或 更 多 的 数组 ， 并 返回 结果 
join0 把 数组 的 所 有 元 素 放 入 一 个 字符 串 元 素 ， 通 过 指定 的 分 隔 符 进 行 分 隔 S| 
popO 删除 并 返回 数组 的 最 后 一 个 元 素 多 
SN \ 


101 ce 人 天 


rv 5 与 CSS 3 网 页 设计 入 门 与 提高 


续 表 
方法 名 称 说 明 
push 向 数组 的 末尾 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
Teverse() 颠倒 数组 中 元 素 的 顺序 
shiftO 删除 并 返回 数组 的 第 一 个 元 素 
slice0 从 某 个 已 有 的 数组 返回 选 定 的 元 素 
sort() 对 数组 的 元 素 进行 排序 
splice0 删除 元 素 ， 并 向 数组 添加 新 元 素 
toSource0 返回 该 对 象 的 源 代码 
toStringO 把 数组 转换 为 字符 串 ， 并 返回 结果 
toLocaleString0) 把 数组 转换 为 本 地 数组 ， 并 返回 结果 
unshiftO 向 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
valueOf 返回 数组 对 象 的 原始 值 
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Document 对 象 使 设计 人 员 可 以 从 脚本 中 对 HTML 页 面 中 的 元 素 进 行 访问 。Document 
对 象 是 Window 对 象 的 一 部 分 ， 可 通过 window.document 属性 对 其 进行 访问 。 

Document 对 象 可 以 控制 页 面 中 的 元 素 ， 也 可 以 对 多 个 元 素 统一 处 理 。 对 多 个 元 素 统一 
处 理 需 要 使 用 集合 ， 其 所 包含 的 集合 如 表 3-3 所 示 。 


表 3-3 ”Document 对 象 的 集合 


集合 说 明 
all 提供 对 文档 中 所 有 HTML 元 素 的 访问 
anchors, 返回 对 文档 中 所 有 Anchor 对 象 的 引用 
applets 返回 对 文档 中 所 有 Applet 对 象 的 引用 
forms[] 返回 对 文档 中 所 有 Form 对 象 的 引用 
images| 返回 对 文档 中 所 有 Image 对 象 的 引用 
links[] 返回 对 文档 中 所 有 Area 和 Link 对 象 的 引用 


HTML Document 接口 对 DOM Document 接口 进行 了 扩展 ， 定 义 HTML 专用 的 属性 和 
a 

很 多 属性 和 方法 都 是 HTML Collection 对 象 拥有 的 ， 其 中 保存 了 对 锚 、 表 单 、 链 接 以 
及 其 他 可 脚本 化 元 素 的 引用 。 其 常用 属性 和 方法 如 表 3-4 和 表 3-5 所 示 。 


表 3-4 Document 对 象 的 属性 


属性 名 称 说 明 


body 提供 对 <body> 元 素 的 直接 访问 。 对 于 定义 了 框架 集 的 文档 ， 该 属性 引用 最 外 层 的 


<frameset> 


NN 
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属性 名 称 说 明 
cookie 设置 或 返回 与 当前 文档 有 关 的 所 有 cookie 吧 
domain 返回 当前 文档 的 域名 3 
lastModified ”| 返回 文档 被 最 后 修改 的 日 期 和 时 间 脚 
Teferrer 返回 载 入 当前 文档 的 URL 
title 返回 当前 文档 的 标题 霹 
URL 返回 当前 文档 的 URL 
表 3-5 Document 对 象 的 方法 
方法 名 称 描 述 
close0) 关闭 用 document.open0 方 法 打开 的 输出 流 ， 并 显示 选 定 的 数据 
getElementById0 返回 对 拥有 指定 id 的 第 一 个 对 象 的 引用 
getElementsByName0 返回 带 有 指定 名 称 的 对 象 集合 
getElementsByTagName() 返回 带 有 指定 标签 名 的 对 象 集合 
open() 打开 一 个 流 ， 以 收集 来 自任 何 document write0) 或 document.writeln0 方 法 
的 输出 
writeO 向 文档 写 HTML 表达 式 或 JavaScript 代码 
writeln 等 同 于 write0 方 法 ， 不 同 的 是 在 每 个 表达 式 之 后 写 一 个 换行 符 


write0 方 法 值得 注意 ， 在 文档 载 入 和 解析 的 时 候 ， 它 允许 一 个 脚本 向 文档 中 插入 动态 生成 
的 内 容 。 


€73 HTML DOM Event 对 象 


Event 对 象 监控 事件 的 状态 ， 其 事件 包括 键盘 事件 和 鼠标 事件 ， 事 件 的 状态 包括 键盘 
按钮 的 按 下 、 松 开 ， 鼠 标的 单 击 、 双 击 等 。 

为 这 些 事件 定义 脚本 ， 可 使 页 面 与 用 户 之 间 建 立 互动 ， 页 面 根据 用 户 的 操作 执行 相应 
的 脚本 。 事 件 通常 与 函数 结合 使 用 ， 函 数 不 会 在 事件 发 生前 被 执行 。 

Event 对 象 的 应 用 通常 是 对 Event 对 象 属性 的 应 用 ， 其 属性 定义 了 元 素 的 操作 事件 ， 为 
元 素 的 事件 定义 脚本 ， 以 实现 元 素 的 功能 。 其 常用 属性 如 表 3-6 所 示 。 


表 3-6 ”Event 对 象 的 常用 属性 


属性 名 称 说 明 
onclick 当 用 户 单 击 某 个 对 象 时 调用 的 事件 
ondblclick 当 用 户 双 击 某 个 对 象 时 调用 的 事件 
onfocus 元 素 获得 焦点 fp 8 
onkeydown 某 个 键盘 按键 被 按 下 CO 
| 


局 
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续 表 
属性 名 称 说 明 
onkeypress 某 个 键盘 按键 被 按 下 并 松 开 
onkeyup 某 个 键盘 按键 被 松 开 
onload - 张 页 面 或 一 幅 图 像 完成 加 载 
onmousedown 鼠标 按钮 被 按 下 
onmousemove 鼠标 被 移动 
onmouseout 鼠标 从 某 元 素 移 开 
onmouseover 鼠标 移 到 某 元 素 之 上 
onmouseup 鼠标 按键 被 松 开 
onreset 重 置 按钮 被 点 击 
onselect 文本 被 选中 
onsubmit 确认 按钮 被 点 击 
onunload 户 退 出 页 面 


3.7.4 Window 对 象 


Window 对 象 表示 一 个 浏览 器 窗口 或 一 个 框架 。 在 客户 端 JavaScript 中 ，Window 对 象 
是 全 局 对 象 ， 所 有 的 表达 式 都 在 当前 的 环境 中 计算 。 也 就 是 说 ， 要 引用 当前 窗口 ， 根 本 不 
需要 特殊 的 语法 ， 可 以 把 那个 窗口 的 属性 作为 全 局 变量 来 使 用 。 

例如 ， 可 以 只 写 document， 而 不 必 写 window.document。 同 样 ， 可 以 把 当前 窗口 对 象 的 
方法 当 作 函 数 来 使 用 ， 如 只 写 alert0， 而 不 必 写 window.alert)。Window 对 象 的 常用 方法 如 
表 3-7 所 示 。 


表 3-7 Window 对 象 的 方法 


方法 名 称 说 明 
alertO 显示 带 有 一 段 消息 和 一 个 确认 按钮 的 警告 框 
blur 把 键盘 焦点 从 顶层 窗口 移 开 
clearIntervalO) 取消 由 setInterval0 设 置 的 timeout 
clearTimeoutO) 取消 由 setTimeout0 方 法 设置 的 timeout 
close! 关闭 浏览 器 窗口 
confirmO 显示 带 有 一 段 消息 以 及 确认 按钮 和 取消 按钮 的 对 话 杠 
createpopupO) 创建 一 个 pop-up 窗口 
focus() 把 键盘 焦点 给 予 一 个 窗口 
moveB; 可 相对 窗口 的 当前 坐标 把 它 移动 指定 的 像素 
moveTo0 把 窗口 的 左上 角 移动 到 一 个 指定 的 坐标 
openO 打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 
rint 打印 当前 窗口 的 内 容 


N 


$2 

第 

续 表 四 

看 

方法 名 称 说 明 

ei 显示 可 提示 用 户 输入 的 对 话 框 

a 

resizeB: 按照 指定 的 像素 调整 窗口 的 大 小 号 

TesizeTo0) 把 窗口 的 大 小 调整 到 指定 的 宽度 和 高 度 脚 

serollBy0 按照 指定 的 像素 值 来 滚动 内 容 

scrollTo 把 内 容 滚动 到 指定 的 坐标 言 
setInterval0 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 

setTimeout' 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 


除了 表 3-7 所 列 出 的 方法 ，Window 对 象 还 实现 了 核心 JavaScript 所 定义 的 所 有 全 局 属 
性 和 方法 。 

Window 对 象 的 window 属 性 和 self 属 性 引用 的 都 是 它 自己 。 当 明确 地 引用 当前 窗口 ， 而 
不 仅仅 是 隐 式 地 引用 它 时 ， 可 以 使 用 这 两 个 属性 。 除 了 这 两 个 属性 之 外 ，parent 属 性 、top 
属性 以 及 frame[] 数 组 都 引用 了 与 当前 Window 对 象 相关 的 其 他 Window 对 象 。 

新 的 顶层 浏览 器 窗口 由 方法 window.open0 创 建 。 当 调用 该 方法 时 ， 应 把 open0 调 用 的 
返回 值 存储 在 一 个 变量 中 ， 然 后 使 用 那个 变量 来 引用 新 窗口 。 新 窗口 的 opener 属 性 反 过 来 
引用 了 打开 它 的 那个 窗口 。 

- 般 来 说 ，Window 对 象 的 方法 都 是 对 浏览 器 窗口 或 框架 进行 某 种 操作 。 而 alert0 方 法 
、confirm() 方 法 和 prompt 方 法 则 不 同 ， 它 们 通过 简单 的 对 话 框 与 用 户 进行 交互 。 


3.8 ”实战 一 一 长 方 体 几何 计算 


本 章 全 面 讲述 了 JavaScript 的 基础 知识 ， 包 括 JavaScript 中 的 语法 规则 、 语 句 、 变 量 、 
运算 符 、 对 象 和 函数 等 。 本 节 结 合 本 章 内 容 ， 创 建 长 方 体 函 数 并 对 其 进行 实例 化 。 具 体 要 


。@ ”创建 长 方 体 计算 函数 ， 有 长 方 体 的 长 、 宽 和 高 这 3 个 参数 。 

e 在 函数 中 计算 获取 长 方 体 的 体积 属性 值 和 表面 积 属性 值 。 

@ ”创建 长 4、 宽 3、 高 2 的 长 方 体 和 长 宽 高 均 为 3 的 正方 体 。 

@ ”计算 这 两 个 长 方 体 的 面积 和 体积 并 输出 。 

e@ ”判断 长 方 体 和 正方 体 的 体积 大 小 并 输出 。 

实现 上 述 要 求 ， 步 又 如 下 。 

国 轨 01| 创建 长 方 体 计算 函数 ， 有 长 方 体 的 长 、 宽 和 高 这 3 个 参数 ， 在 函数 中 计算 
获取 长 方 体 的 体积 属性 值 和 表面 积 属性 值 ， 函 数 代码 如 下 : 


<script> 
function boxes (1，w，h) { 
this.1 = 1; 
this.w = Ww; SS| 
this.h = h; 
AG 治 
CY 
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Ehissarea CT WE 
this.volume =1]1*h*w; 
} 
</script> 


创建 长 4、 宽 3、 高 2 的 长 方 体 和 长 宽 高 均 为 3 的 正方 体 ， 计 算 这 两 个 长 方 
体 的 面积 和 体积 并 输出 ， 代 码 如 下 : 


Var boxl = new boxes(2, 3, 4); 
document .write ("长 方 体 表面 积 : " + boxl.area + "<br/>"); 
document .write ("长 方 体 体积 : " + box1.volume + "<br/>"); 
Var box2 = new boxes(3, 3, 3); 
document .write ("正方 体 表 面积 : " + box2.area + "<br/>"); 
document .write ("正方 体 体 积 : " + box2.volume + "<br/>"); 


判断 长 方 体 和 正方 体 的 体积 大 小 并 输出 ， 代 码 如 下 : 


if (boxl.area > box2.area) 


document .write ("长 方 体 体积 较 大 ") ; 
else if (boxl.area == box2.area) 
document .write ("体积 一 样 大 "); 
else 


document .write ("正方体 体积 较 大 ") ; 


葬 轨 04| 运行 上 述 代码 ， 执 行 效果 如 图 3-15 所 示 。 


1 localhost3l9e/Hmpao x 二 
| < © D localhost:3196/HtmlPage3.html 


长 方 体 表 面积 ，52 


正方 体 体积 ，27 
正方 体 体积 较 大 


3-15 长方体 几何 计算 的 执行 效果 


3.9 本 章 习 题 


1. 填空 题 

(1) HTML 中 的 脚本 必须 位 于 标记 之 间 。 

(2) HTMLS5 中 默认 使 用 脚本 语言 。 

(3) JavaScript 中 输出 不 换行 的 文本 的 函数 是 
(4) JavaScript 单行 注释 使 用 符号 。 
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(5) JavaScript 多 行 注释 使 用 符号 和 “*/” 符 号 。 
(6) 数字 类 型 中 的 0 对 于 Boolean 类 型 中 的 
2. 选择 题 


(1) 以 下 关于 JavaScript 的 说 法 正确 的 是 
A.，JavaScript 中 分 号 和 换行 都 可 以 作为 JavaScript 语句 的 结束 
B.，JavaScript 语句 不 区 分 大 小 写 
C.JavaScript 中 的 字符 使 用 单 引号 ， 字 符 串 使 用 双 引 号 
D.，JavaScript 中 每 一 条 语句 都 以 分 号 结尾 

(2) 下 列 不 属于 JavaScript 选择 语句 的 是 
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A.， 于 语句 B. 让 else 语句 

C. continue 语句 D. switch-case 语句 
(3) 下 列 保留 字 与 选择 语句 无 关 的 是 g 

A. 下 B. case C. break D. continue 
(4) 下 列 语句 与 循环 语句 无 关 的 是 

A. for 语句 B. do-while 语句 C.，break 语句 D. while 语句 


(5) 下 列 关于 变量 的 说 法 正确 的 是 
A. 变量 不 可 以 以 特殊 符号 开头 ， 如 $ 符 号 
B. JavaScript 支持 多 种 数据 类 型 ， 因 此 在 声明 变量 时 需要 声明 其 数据 类 型 
C. 变量 在 没有 赋值 的 情况 下 值 为 undefined 
D. 变量 在 没有 赋值 的 情况 下 值 为 null 
(6) 下 列 不 属于 逻辑 运算 符 的 是 y 
A. &e& B. | C.! D. & 


3. 上 机 练习 


使 用 一 种 符号 ， 如 @、#、* 或 等， 输出 一 个 直角 梯形 。 要 求 在 梯形 每 一 行 的 中 间 位 
置 使 用 另 一 种 符号 ， 达 到 如 图 3-16 所 示 的 效果 。 


图 3-16 上 机 练习 的 效果 


107 


第 在 章 


网 页 设计 实战 案例 


通过 前 面 章节 的 学 习 ， 读 者 已 经 掌握 了 设计 网 页 的 所 有 知识 ， 包 括 制作 网 页 
内 容 的 HIML、 控 制 网 页 效果 的 CSS 以 及 实现 网 页 特效 的 JavaScript。 

本 章 将 为 读者 介绍 实际 网 页 设计 时 所 需 掌握 的 各 种 技能 。 首 先 需要 了 解 网 页 
设计 的 流程 ， 选 择 一 款 合适 的 开发 工具 以 及 了 解 常见 的 网 页 布局 结构 。 接 下 来 ， 
需要 掌握 如 何 设计 布局 、 使 布局 标准 化 的 方法 以 及 布局 时 的 理论 知识 。 最 后 通过 
3 个 实 虐 案例， 讲解 HTML 中 使 用 DIV 结合 CSS 实现 网 页 常见 效果 的 方法 。 


本 章 学 习 目 标 : 

了 解 网 页 设计 流程 

熟悉 常用 的 网 页 设计 工具 

掌握 Dreamweaver 的 基本 操作 

熟悉 常见 网 页 布局 结构 

掌握 居中 和 自 适 应 布局 的 设计 

了 解 网 站 重 构 的 意义 和 方法 

理解 区 块 的 概念 及 定义 方法 
掌握 定位 区 块 的 方法 

了 解 空白 边 司 加 产生 的 原因 及 解决 方法 


ieeeeeee 


4.1 网 页 设计 流程 


为 了 加 快 网 站 建设 的 速度 和 减少 失误 ， 应 该 采用 一 定 的 制作 流程 来 策划 、 设 计 、 制 作 
和 发 布 网 站 。 通 过 使 用 制作 流程 ， 确 定制 作 步 又， 以 确保 每 一 步 顺利 完成 ， 而 不 影响 下 一 
步 的 进行 。 理 想 的 制作 流程 能 帮助 设计 者 解决 策划 网 站 的 繁琐 性 ， 减 小 项 目 失败 的 风险 。 
制作 流程 的 第 一 阶段 是 规划 项 目 和 采集 信息 ， 接 着 是 网 站 规划 和 设计 网 页 ， 最 后 是 上 传 和 
维护 网 站 阶段 。 

每 个 阶段 都 有 独特 的 步骤 ， 但 相连 的 各 阶段 的 边界 并 不 明显 。 进 一 步 说 ， 每 一 阶段 并 
不 总 是 有 一 个 固定 的 目标 。 有 时 候 ， 某 一 阶段 可 能 会 因为 项 目 中 未 曾 预料 的 改变 而 更 改 。 
步骤 的 实际 数目 和 名 称 因 人 而 异 ， 但 是 总 体制 作 流程 如 图 4-1 所 示 。 


1. 客户 需求 说 明 
双向 个 性 化 的 客户 需求 沟通 和 需求 理解 
. 合作 意向 


合同 
ah 上 站、 功能 、 2 . 网 站 业务 和 市 场 定位 
网 站 策划 “二 】 人 


f 1. 互联 网 业务 顾问 
4 .网 站 群 配套 的 广告 方案 


1 确定 技术 线路 和 平台 
整体 设计 { 2 网 站 栏目 等 各 环节 的 设计 
网 页 编程 

数据 库 { 网 站 制作 和 设计 实现 
同步 进行 


网 站 测试 、 系 统 集成 、 系 统 性 能 优化 、 1 网 站 测试 上 伟 
2 .数据 托管 方案 
网 站 推广 ( 网 站 托管 、 管 理 服务 ] { 


3 . 管理 服务 方案 
]】 客户 验收 
{ 网 站 内 容 维护 
网 站 内 容 维护 、 系 统 运行 维护 中 2 ”网 站 运行 维护 
网 站 维护 [ 3. 管理 服务 实施 


图 4-1 网 站 开发 流程 


4.2 网 页 设计 工具 


俗话 说 ，“ 工 欲 善 其 事 ， 必 先 利 其 器 。” 

使 用 不 同 的 网 页 设计 工具 并 不 会 影响 设计 网 页 质量 的 好 坏 。 但 是 ， 如 果 拥 有 一 款 功能 
强大 、 使 用 简单 的 网 页 设计 工具 ， 往 往 会 使 我 们 的 工作 变 得 事半功倍 ， 提 高 网 页 开发 效 
率 。 下 面 介 绍 几 款 比 较 常 用 的 网 页 设计 工具 。 


4.2.1 记事 本 


使 用 Windows 系统 自 带 的 记事 本 也 可 以 编辑 网 页 ， 如 图 4-2 所 示 。 只 需要 在 保存 文档 
时 ， 以 .html 或 者 .htm 为 后 缀 名 进行 保存 即 可 。 使 用 记事 本 编辑 网 页 ， 没 有 语法 检查 、 没 有 
代码 格式 化 、 没 有 自动 提示 ， 使 网 页 开发 非常 困难 ， 因 此 并 不 推荐 使 用 。 
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4-2 用 记事 本 编辑 HTML 文 档 


4.2.2 ” FrontPage 


FrontPage 是 微软 公司 出 品 的 一 款 网 页 制作 入 门 级 软件 。FrontPage 作为 一 款 中 低 端 网 
页 制作 软件 ， 拥 有 广泛 的 用 户 群 。FrontPage 的 特点 是 简单 、 易 学 、 易 用 ， 正 是 这 些 特 点 吸 
引 了 绝 大 多 数 的 网 页 设计 初学 者 的 眼光 。FrontPage 的 多 个 版 本 中 ，FrontPage 2003 被 用 户 
使 用 得 最 为 广泛 ， 其 主 界面 如 图 4-3 所 示 。 


4-3 ”FrontPage 2003 的 主 界面 


rm 5 与 CSS 3 网 页 设计 入 门 与 提高 


FrontPage 结合 了 设计 、 源 代码 和 预览 三 种 模式 于 一 体 。 可 以 同时 查看 源 代码 和 设计 视 
图 ， 与 Microsoft Office 各 软件 可 无 颖 连接 ， 拥 有 良好 的 表格 控制 能 力 ， 并 且 继承 了 
Microsoft Office 系列 产品 的 良好 易 用 性 。 

2006 年 ， 微 软 在 官方 网 站 上 宣布 FrontPage 停止 更 新 。FrontPage 将 被 两 款 专业 的 网 页 
设计 工具 所 取代 : Expression Web 和 SharePoint Designer。 这 两 款 软件 部 分 组 件 都 是 基于 
Microsoft FrontPage 的 。 在 Microsoft Office System 2007 中 已 经 包含 了 Microsoft SharePoint 
Designer。 


4.2.3 _ Dreamweaver 


Dreamweaver 是 Adobe 公司 的 产品 ， 它 与 Flash、Fireworks 并 称 网 页 三 剑客 ， 是 网 页 
制作 工具 界 的 霸主 。Dreamweaver 是 集 网 页 制作 和 管理 网 站 于 一 身 的 所 见 即 所 得 的 网 页 编 
辑 器 ， 它 是 第 一 套 针 对 专业 网 页 设计 师 特 别 开 发 的 可 视 化 网 页 开发 工具 ， 利 用 它 可 以 轻 而 
易 举 地 制作 出 充满 动感 的 网 页 。 

Dreamweaver 的 主 界面 如 图 4-4 所 示 。 
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4-4 ”Dreamweaver 的 主 界面 


Dreamweaver 主要 有 以 下 优点 。 

e@ 最 佳 的 制作 效率 : Dreamweaver 可 以 使 用 鼠标 拖 搜 的 方式 快速 地 放 入 页 面 元 素 ， 
它 的 智能 提示 功能 使 我 们 可 以 更 加 民意 地 编写 代码 。 

@ ”网 站 管理 方便 : Dreamweaver 使 用 网 站 地 图 可 以 很 方便 地 管理 站 点 资源 和 文件 。 

@ 无 可 比拟 的 控制 能 力 : Dreamweaver 是 唯一 提供 Roundtrip HTML、 可 视 化 编辑 与 
原始 码 编辑 同步 的 设计 工具 。 


@ 集成 动态 开发 语言 : Dreamweaver 还 集成 了 动态 程序 开发 语言 ， 完 全 支持 对 
ASP、.NET、PHP、JS 等 基本 语言 和 连接 操作 数据 库 的 功能 。 
总 之 ，Dreamweaver 是 一 款 非常 优秀 的 网 页 制作 工具 。 正 如 它 的 名 字 一 样 ， 它 能 使 网 
页 设计 工作 就 像 编织 一 个 美丽 的 梦 。 


4.2.4 实战 一 一 制作 个 人 主页 


在 了 解 了 常用 的 三 款 网 页 设计 工具 之 后 ， 本 节 将 以 Dreamweaver 工具 为 例 制作 一 个 个 
人 主页 。 

在 设计 个 人 主页 时 ， 可 以 使 用 表格 来 控制 页 面 的 版 式 ， 再 使 用 图 文 混 排 的 方式 进行 布 
局 。 除 此 之 外 ， 还 可 以 通过 设置 文本 的 大 小 、 颜 色 、 对 齐 方式 等 属性 ， 使 网 页 更 加 美观 ， 
并 对 一 些 文本 可 以 突出 显示 。 另 外 ， 可 以 使 用 图 片 和 CSS 样式 来 修饰 效果 。 

有 具体 步骤 如 下 。 

BE 凤 01| 打开 Dreamweaver， 新 建 一 个 空白 的 HTML 文件 ， 保 存 为 index html。 
多 唱 02| 在 “标题 ”文本 框 中 输入 “欢迎 光临 我 的 主页 ”， 按 Ctrlts 组 合 键 保存 文 

档 。 在 空白 页 面 中 右 击 ， 从 弹出 的 快捷 菜单 中 选择 “页 面 属性 ”命令 ， 打 开 “ 页 

面 属性 ”对 话 框 ， 在 对 话 框 中 设置 “左边 距 ”、“ 右 边 距 ”、“ 上 边 距 ”和 “下 

边 距 ”都 为 0， 单 击 “ 确 定 ” 按 钮 ， 如 图 4-5 所 示 。 


页 而 属性 全 E:\ayRoot\dvcsd\onepage\inder. htal (XETIL) 出 回 网 


州 是 eta http-equive"Content-Type” content="text/htal; charset=utf-8" /> 
title> 欢 迎 北 恪 我 的 主页 < /title> 


4-5 设置 页 面 属性 和 标题 


欧洲 03| 单 击 “ 常 用 ”选项 卡 中 的 “表格 ”按钮 国 ， 打 开 “ 表 格 ” 对 话 框 ， 设 置 
“ 行 数 ”和 “ 列 数 ” 均 为 1，“ 表 格 宽度 ”为 100%，“ 边 框 粗细 ”为 0 像素 ， 单 
击 “ 确 定 ”按钮 创建 第 一 个 表格 ， 如 图 4-6 所 示 。 


[= 


i 利用 表格 可 以 控制 文本 、 图 像 和 Flash 在 页 面 上 出 现 的 位 置 ， 不 必 担 心 页 
面 的 整体 结构 遭 到 破坏 ， 或 者 在 浏览 时 ， 无 法 正常 显示 。 


单 击 选中 这 个 单元 格 ， 在 “属性 ”面板 上 设置 单元 格 的 高 度 为 100。 进 入 
“ 拆 分 ”视图 ， 输 入 代码 “background=- “images/header gif ”为 单元 格 设置 一 张 背 
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景 图 片 ， 如 图 4-7 所 示 。 


输入 背景 图 片 代 码 


上 | 7 | 由 加 无 习 闫 却 加 
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王国 so 而 
#9; 0 | 田 口头 覆 四 计 yw 高 是 证 田口 


TE toil OE) ee] 


EC 


4-6 插入 1 行 1 列 表格 4-7 ”设置 表格 背景 图 片 


在 单元 格 中 输入 “我 的 个 人 主页 ”， 然 后 在 “属性 ”面板 中 设置 “字体 ” 
为 “黑体 ”，“ 大 小 ”为 28，“ 文 本 颜色 ”为 本 DFDE0， 如 图 4-8 所 示 。 

接 下 来 制作 导航 栏目 。 单 击 “ 常 用 ”选项 卡 中 的 “表格 ”按钮 ， 创 建 第 二 
个 表格 ， 设 置 为 6 列 、 间 距 为 1。 选 择 表 格 ， 在 “属性 ”面板 中 设置 表格 的 
“ 行 ”、“ 列 ”、“ 宽 ”、“ 间 距 ”、“ 边 框 ”， 并 把 “背景 颜色 ”设置 为 
#006600， 如 图 4-9 所 示 。 


设置 字体 的 
大 小 和 颜色 


SETTLE [| 
sD) 加 [x je | 
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4-8 ”设置 标题 文字 的 字体 属性 4-9 设置 1 行 6 列 表格 属性 


加 这 ”和 DK 关 | 商 凶 [| | 标 四 区 口 


瞩 注意 : 当 用 户 打开 “表格 ”对 话 框 时 ， 看 到 上 面 的 默认 设置 是 上 一 次 设置 的 参 
数 。 每 次 对 “表格 ”对 话 框 进行 更 改 后 ， 由 于 Dreamweaver 具有 自动 记忆 功能 ， 所 以 会 
记 住 用 户 这 次 的 设置 。 


国 国 0o7] 单 击 第 二 个 表格 ， 然 后 单 击 标记 <tr> 选 中 该 行 ， 在 “属性 ”面板 中 ， 设 置 
“高 ”为 18， 设 置 “背景 颜色 ”为 #669900， 设 置 “水 平 ”对 章 方式 为 “居中 对 
齐 ”， 设 置 “垂直 ”为 “底部 ”， 设 置 字体 “大 小 ”为 12、“ 字 体 颜 色 ” 为 
#EFF6D6， 如 图 4-10 所 示 。 

选中 前 5 个 单元 格 ， 设 置 它们 的 宽度 为 120， 分 别 输 入 文字 “我 的 日 

记 ”、“ 我 的 收藏 ”、“ 我 的 相册 ”、“ 我 的 朋友 ”和 “给 我 留言 ”， 如 图 4-11 

所 示 。 
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图 4-10 设置 单元 格 属性 4-11 设置 菜单 文字 


打开 “页 面 属性 ”对 话 框 ， 设 置 页 面 的 “背景 颜色 ”为 本 DFDE0。 单 击 
“常用 ”选项 卡 中 的 “表格 ”按钮 国 ， 设 置 参数 为 1 行 2 列 ， 设 置 “ 边 框 粗 
细 ”、“ 单 元 格 边 距 ”、“ 单 元 格 间距 ” 均 为 0， 单 击 “ 确 定 ” 按 钮 ， 创 建 第 三 
个 表格 。 然 后 单 击 右边 的 单元 格 ， 在 “属性 ”面板 中 设置 它 的 宽度 和 对 齐 方式 ， 
如 图 4-12 所 示 。 

将 光标 置 于 右边 的 单元 格 中 ， 单 击 “ 常 用 ”选项 卡 中 的 “图 像 ”按钮 ， 在 
打开 的 “选择 图 像 源 文件 ”对 话 框 中 ， 选 择 图 像 treejpg， 单 击 “ 确 定 ”按钮 返 
回 ， 如 图 4-13 所 示 。 
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4-12 ”调整 单元 格 宽度 和 对 齐 方式 4-13 ”插入 图 像 


将 光标 置 于 左边 的 单元 格 ， 在 “属性 ”面板 中 设置 它 的 “垂直 ”对 齐 方式 
为 “顶端 ”。 单 击 “ 常 用 ”选项 卡 中 的 “表格 ”按钮 国 ， 设 置 参数 为 4 行 1 列 ， 
“表格 宽度 ”为 90%，“ 边 框 粗细 ”、“ 单 元 格 边 距 ”、“ 单 元 格 间距 ” 均 为 
0， 单 击 “ 确 定 ”按钮 ， 创 建 第 四 个 表格 。 在 “属性 ”面板 中 设置 表格 的 “对 
齐 ” 方 式 为 “居中 对 齐 ”， 如 图 4-14 所 示 。 

区 到 12] 将 光标 置 于 第 一 个 单元 格 ， 输 入 文章 标题 ， 在 “属性 ”面板 中 设置 文字 的 
大 小 、 颜 色 、 对 齐 方式 ， 以 及 单元 格 的 高 度 、 对 齐 方 式 等 参数 ， 如 图 4-15 所 示 。 

国 到 13|] 在 第 二 个 单元 格 中 输入 文章 的 正文 ， 在 “属性 ”面板 中 设置 文字 的 大 小 和 
颜色 ， 如 图 4-16 所 示 。 

国 国 14] 将 光标 置 于 第 3 个 单元 格 中 ， 设 置 它 的 高 度 为 50。 单 击 “ 常 用 ”选项 卡 中 
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的 “表格 ”按钮 图 ， 设 置 参数 为 1 行 7 列 ，“ 边 框 粗细 ”、“ 单 元 格 边 距 ”、 
“单元 格 间距 ” 均 为 0， 单 击 “ 确 定 ” 按 钮 ， 创 建 一 个 嵌 套 表格 。 在 前 6 个 单元 
格 中 分 别 输入 “友情 链接 ”、“ 百 度 ”、“ 搜 狐 ”、“ 新 浪 ”、 人 到 帮 
网 ”， 按 照 上 一 步骤 的 方法 设置 字体 的 大 小 和 颜色 ， 并 拖 动 表格 边框 调整 到 合 

的 宽度 ， 如 图 4-17 所 示 。 
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4-15 设置 文章 标题 属性 
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图 4-16 设置 正文 内 容 属性 图 4-17 设置 友情 链接 表格 属性 


将 光标 置 于 第 4 个 单元 格 中 ， 设 置 它 的 高 度 为 50， 输 入 版 权 信息 。 选 中 版 
权 信息 ， 在 “属性 ”面板 中 设置 “文本 大 小 ”为 12，“ 文 本 颜色 ”为 #999999， 
如 图 4-18 所 示 。 


bley CRT ble) Gry dy [WO A I00x ~ 50 x 217v 3 /6 Waicode (TF-6) 


图 4-18 设置 版 权 文字 格式 


区 于 16| 至 此 ， 个 人 网 站 的 首页 制作 完成 ， 按 Ctrlts 组 合 键 保存 文档 ， 青 按 F12 键 
就 可 以 在 下 窗口 中 预览 网 页 效果 了 。 最 终 效果 如 图 4-19 所 示 。 


en. eom) 是 汇 智 科技 继 计 算 机 教程 网 之 后 ， 双 最 新 推 十 在 线 教育 平台 。 这 是 一 个 基于 
Web 2. A 和 打造 一 个 免费 开放 各 学 院 。 为 入 | 站] 诊 学 员 提 供 专家 加 绒 营 
系列 巢 程 ， 帮 助 系 统 的 笃 握 流行 技术 ; 为 提高 加 学 员 提供 专 町 课程 、 靖 品 计 座 和 人 [学 皖 东 到 这 往 ， 帮助 快速 


学 习 新 技术 。 
我 们 的 独特 优势 


。 品质 保证 优秀 视频 保障 课程 质量 

。 强化 训练 和 

。 专家 答疑 学 员 问 题 有 旧 必 答 

。 学 习 灵 活 在 线 充 电 ， 时 间 自己 支配 ， 不 受 时间 和 空间 的 限制 

。 针对 性 强 为 每 个 职业 量 身 订 程 

。 9 目前 针对 主流 编程 语言 、 动 态 网 站 开发 、 数 据 库 和 三 维 影视 方面 开 


欢迎 主 册 成 为 我 们 的 会 员 ， 在 这 里 网 络 学 院 、 在 线 学 习 、 专 家 指导 、 笋 对 解答 、 以 及 论坛 为 您 创建 一 个 真 
实 的 学 习 环境 。 同 时 ， 还 可 以 拥有 自己 的 情 客 、 相 册 ， 也 可 以 向 好 友 分 享 你 的 一 切 


友情 链接 。 百度 谷歌 新 浪 网 易 搜狐 计算 机 教程 网 


图 4-19 个 人 主页 的 效果 


4.3 网 页 布局 


网 页 设计 已 经 渐渐 走向 成 熟 ， 毫 无 修饰 的 网 站 必定 会 很 快 地 被 人 遗忘 ， 所 以 在 制作 网 
站 之 前 ， 首 先 要 考虑 网 站 的 整体 视觉 效果 。 在 网 站 整体 视觉 效果 中 ， 主 要 是 网 页 的 色彩 拱 
配 与 网 页 布局 。 前 者 决定 了 浏览 该 网 站 的 第 一 印象 ， 而 后 者 则 决定 网 站 中 的 信息 是 否 为 合 
理 的 安排 。 

下 面 为 读者 介绍 常见 的 网 页 布局 结构 、 设 计 居 中 和 自 适 应 网 页 布局 的 方法 ， 以 及 
DIV+CSS 布局 网 页 的 内 容 。 


人; 常见 的 网 页 布局 结构 


网 页 设计 也 属于 平面 设计 ， 所 以 平面 设计 中 的 构成 原理 同样 适用 于 网 页 设计 。 网 页 布 
局 可 以 从 两 方面 理解 ， 一 种 是 结构 布局 ， 另 一 种 是 艺术 布局 。 

在 介绍 网 页 结构 布局 之 前 ， 先 来 了 解 网 页 布局 的 基本 概念 。 页 面 尺 寸 与 显示 器 大 小 及 
分 辨 率 有 关系 ， 网 页 的 局 限 性 就 在 于 网 页 无 法 突破 显示 器 的 范围 ， 而 且 因为 浏览 器 也 将 占 
去 不 少 空 间 ， 留 给 网 页 的 页 面 范 围 变 得 更 小 。 在 有 限 的 空间 内 合理 地 安排 网 页 元 素 一 一 文 
本 、 图 像 、 多 媒体 以 及 页 眉 和 页 脚 等 尤为 重要 ， 如 图 4-20 所 示 。 
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4-20 网 页 的 基本 元 素 


无 论 是 在 纸 上 布 局 ， 还 是 通过 软件 布局 ， 都 需要 了 解 网 页 中 最 基本 的 布局 方式 。 
1。“ 国 ” 字 型 网 页 布局 
“ 国 ” 字 型 也 可 以 称 为 “ 同 ” 字 型 ， 是 一 些 大 型 网 站 所 喜欢 的 类 型 ， 即 最 上 面 是 网 站 
的 标题 以 及 横幅 广告 条 ， 接 下 来 就 是 网 站 的 主要 内 容 ， 左 右 分 列 两 小 条 内 容 ， 中 间 是 主要 
部 分 ， 与 左右 一 起 罗列 到 底 ， 最 下 面 是 网 站 的 一 些 基本 信息 、 联 系 方式 、 版 权 声明 等 。 这 
种 结构 是 网 上 最 常见 的 一 种 结构 类 型 ， 如 图 4-21 所 示 。 


CD 


图 4-21 标准 的 “ 国 ” 字 型 网 页 


2.， 拐角 型 网 页 布局 


拐角 型 结构 与 上 一 种 只 是 形式 上 的 区 别 ， 其 实 是 很 相近 的 ， 上 面 是 标题 及 广告 横幅 ， 
接 下 来 的 左 侧 或 者 右 侧 是 一 罕 列 链接 等 ， 正 文 是 在 很 宽 的 区 域 中 ， 下 面 也 是 一 些 网 站 的 辅 
助 信息 。 在 这 种 类 型 中 ， 一 种 很 常见 的 类 型 是 ， 最 上 面 为 标题 及 广告 ， 右 侧 为 导航 链接 或 
者 广告 ， 如 图 4-22 所 示 。 
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4-22 ”拐角 型 网 页 


3， 左 右 框 架 型 网 页 布局 

这 是 一 种 左右 分 为 两 页 的 框架 结构 ， 一 般 左 面 是 导航 链接 ， 有 时 最 上 面 会 有 一 个 小 的 
标题 或 标志 ， 右 侧 是 正文 。 我 们 见 到 的 大 部 分 的 大 型 论坛 都 是 这 种 结构 的 ， 有 一 些 企业 网 
站 也 喜欢 采用 该 结构 ， 因 为 这 种 类 型 结构 非常 清晰 ， 一 目 了 然 ， 如 图 4-23 所 示 。 


4-23 ”左右 框架 型 网 页 


4. 封面 型 网 页 布局 

这 种 类 型 基本 上 是 出 现在 一 些 网 站 的 首页 ， 大 部 分 为 一 些 精美 的 平面 设计 结合 一 些小 
的 动画 ， 放 上 几 个 简单 的 链接 或 者 仅 是 一 个 “进入 ”的 链接 甚至 直接 在 首页 的 图 片上 做 链 
接 而 没有 任何 提示 。 这 种 类 型 大 部 分 出 现 于 企业 网 站 和 个 人 主页 ， 如 果 处 理 得 好 ， 会 给 人 


带 来 赏心悦目 的 感觉 ， 如 图 4-24 所 示 。 
> 


4-24 封面 型 网 页 


4.3.2 设计 居中 布局 


布局 的 居中 设计 在 目前 网 页 布局 中 的 应 用 非常 广泛 。 所 以 ， 如 何在 CSS 中 设计 居中 的 
页 面 布局 也 是 大 多 数 开 发 人 员 首 先 要 学 的 技能 之 一 。 
要 使 用 CSS 实现 让 页 面 居中 ， 主 要 有 两 个 基本 方法 ;一 个 方法 是 使 用 自动 空白 边 ; 另 
一 个 方法 是 使 用 定位 和 负 值 的 空白 边 。 
1. 使 用 自动 空白 边 设计 居中 
这 种 方法 适用 于 让 页 面 上 的 div 容器 在 屏幕 上 水 平 居中 。 例 如 ， 一 个 典型 的 布局 可 能 
有 如 下 的 代码 : 
<body> 
<div id="Page"></div> 
</body> 
为 此 ， 只 需要 定义 div 的 宽度 ， 然 后 将 水 平 空 白 边 设置 为 自动 。 这 样 会 产生 如 下 的 
CSS 样式 代码 ; 
#Page { 
width: 600px; 
background: #fff; 
margin: 0 auto; 
} 
这 种 CSS 样式 的 定义 方法 在 目前 大 多 数 浏览 器 中 都 是 有 效 的 。 但 是 , 在 还 5 和 下 6 
中 不 支持 自动 空白 边 ， 因 为 下 将 “text-align:center” 理 解 为 让 所 有 页 面 元 素 居中 ， 而 不 是 
文本 居中 。 利 用 这 一 点 ， 可 以 设计 出 兼容 性 更 好 的 完美 居中 布局 。 方 法 是 ， 让 <body> 标 记 
中 的 所 有 内 容 居 中 ， 包 括 div 容器 ， 然 后 作为 页 面容 器 的 内 容重 新 使 用 左 对 齐 。 
下 面 展示 了 改进 后 的 方案 : 
body { 
text-align: center; 


} 
#Page { 


width: 600px; 

background: #fff; 

margin: 0 auto; 

text-align: left; 
} 


使 用 上 述 代 码 可 以 解决 多 种 浏览 器 中 居中 不 统一 的 问题 。 其 中 text-align 属性 的 使 用 是 
非常 必要 的 ， 它 不 会 对 代码 产生 任何 负面 作用 。 同 时 ， 可 以 保证 容器 在 页 面 中 的 绝对 居中 
显示 。 

2. 使 用 定位 和 负 值 的 空白 边 设计 居中 

与 第 一 种 方法 类 似 ， 这 种 方法 同样 要 定义 容器 的 宽度 。 然 后 ， 将 容器 的 position 属性 
设置 为 relative， 将 left 属性 设置 为 50%， 就 会 把 容器 的 左边 缘 定位 在 页 面 的 中 间 。 如 下 面 
的 CSS 样式 代码 所 示 : 


#Page { 
width: 600px; 
background-color: #FFF; 
position: relative; 
left: 50%; 
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} 
如 果 不 希 望 让 容器 的 左边 缘 居 中 ， 而 是 希望 让 容器 的 中 间 对 应 页 面 居 中 ， 实 现 的 方法 
是 对 容器 的 左边 应 用 一 个 负 值 的 空白 边 ， 宽 度 等 于 容器 宽度 的 一 半 。 这 样 会 把 容器 向 左 移 
动 其 宽度 的 一 半 ， 从 而 让 容器 在 屏幕 上 居中 。 代 码 如 下 : 
#Page { 
width: 600px; 
background-color: #FFF; 
position: relative; 
left: 50%; 


margin-left: -300px; 
} 


4.3.3 设计 自 适应 布局 

顾名思义 ， 自 适应 布局 是 指 页 面 中 容器 的 大 小 会 随 着 浏览 器 的 大 小 自动 调整 。 自 适应 
布局 可 以 分 为 浮动 布局 、 流 体 布局 和 弹性 布局 三 种 。 

1. 浮动 布局 

在 基于 浮动 的 网 页 布局 中 ， 需 要 设置 希望 定位 元 素 的 宽度 ， 然 后 再 控制 它们 在 调整 时 
是 向 左 或 者 向 右 进行 浮动 。 浮 动 布局 的 经 典 应 用 分 为 两 种 情况 : 两 列 和 三 列 的 浮动 布局 。 

2. 流体 布局 

在 浮动 布局 中 都 是 使 用 像素 为 单位 来 定义 宽度 ， 因 此 这 种 布局 类 型 又 称 为 固定 布局 。 
在 使 用 流体 布局 时 ， 尺 寸 是 使 用 百分数 而 不 是 像素 设置 的 ， 这 样 可 以 使 流体 布局 能 够 相对 
于 浏览 器 容器 进行 伸缩 。 
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bE 使 用 流体 的 网 页 布局 时 ， 当 浏览 器 窗口 过 小 的 时 候 ， 行 会 变 得 非常 窄 ， 很 
难 阅读 ， 在 多 列 布局 中 尤其 明显 。 因 此 ， 有 必要 适当 使 用 以 像素 或 em 为 单位 的 国定 宽 
度 ， 从 而 防止 布局 变 得 很 罕 。 


3， 弹 性 布局 


弹性 布局 是 相对 于 字号 (而 不 是 浏览 器 宽度 ) 来 设置 元 素 宽度 的 。 通 过 以 em 为 单位 设置 
宽度 ， 可 以 确保 在 字号 增加 时 整个 布局 也 跟着 扩大 。 这 可 以 将 行 保持 在 可 阅读 范围 内 ， 对 
于 视力 弱 或 有 认 知 障碍 的 人 尤其 有 用 。 

创建 弹性 布局 比 创建 流体 布局 要 容易 得 多 。 因 为 ， 所 有 XHTML 元 素 基本 上 一 直 出 现 
在 相同 的 相对 位 置 上 ， 它 们 仅仅 是 同时 随 文本 字号 而 增 大 的 。 将 固定 宽度 布局 转换 为 弹性 
布局 也 非常 简单 ， 重 点 是 设置 基 字 号 ， 让 lem 大 致 相当 于 10 像素 。 

与 其 他 布局 技术 一 样 ， 弹 性 布局 也 有 自己 的 问题 。 弹 性 布局 的 问题 与 固定 宽度 布局 相 
同 ， 例 如 ， 不 能 充分 利用 可 用 空间 。 另 外 ， 因 为 它 在 文本 字号 增加 时 整个 布局 会 加 大 ， 所 
以 弹性 布局 会 变 得 比 浏览 器 窗口 宽 ， 导 致 出 现 水 平 滚动 条 。 为 了 防止 这 种 情况 ， 可 能 需要 
在 body 元 素 中 添加 max-width 属性 为 “100%”。 


攻取 注意 : 下 6 和 更 低 版 本 的 浏览 器 当前 不 支持 max-width 属性 ， 但 是 Safari 和 
Firefox 等 符合 标准 的 浏览 器 支持 。 


4.3.4 ”DIV+CSS 重 构 网 站 布局 


网 站 的 重 构 可 以 理解 为 改变 旧 的 HTML 表格 布局 ， 使 用 新 的 符合 Web 标准 的 网 站 结 
构 及 代码 改良 的 方式 。 将 现 有 网 站 转向 Web 标准 设计 可 以 称 为 网 站 重 构 。 网 站 重 构 的 意义 
在 于 建立 良好 的 可 扩充 性 ， 通 过 DIV 布局 来 进行 数据 结构 的 设计 ， 便 于 以 后 更 多 DIV 数 
据 的 扩充 ， 而 CSS 对 id、class 这 些 元 素 的 样式 定义 也 使 得 可 维护 性 大 大 提高 。 

与 传统 的 表格 布局 页 面相 比 ，DIV+CSS 方式 的 最 大 优势 就 是 结构 清晰 、 维 护 简单 和 易 
于 理解 。 在 这 种 方式 中 ，DIV( 层 ) 负 责 在 页 面 中 表现 内 容 的 层次 和 结构 ，CSS 则 来 控制 内 
容 表 现 方式 和 位 置 。 

基于 Web 标准 的 网 站 设计 的 核心 在 于 如 何 使 用 众多 Web 标准 中 的 各 项 技术 来 达到 表 
现 与 内 容 的 分 离 ， 即 网 站 的 结构 、 表 现 、 行 为 三 者 分 离 。 只 有 真正 实现 了 结构 分 离 的 网 页 
设计 ， 才 是 真正 意义 上 符合 Web 标准 的 网 页 设计 。 为 了 达到 表现 与 内 容 分 离 ， 推 荐 使 用 
XHTML 以 更 严谨 的 语言 编写 结构 ， 并 使 用 CSS 来 完成 网 页 的 布局 表现 ， 因 此 掌握 基于 
CSS 的 网 页 布局 方式 ， 是 实现 Web 标准 的 基础 环节 。 

传统 表格 布局 方式 实现 时 是 利用 了 HTML 的 table 表格 元 素 具有 无 边框 的 特性 ， 由 于 
table 元 素 可 以 在 显示 时 使 得 边框 和 间距 设置 为 0， 即 不 显示 边框 ， 因 此 ， 可 以 将 网 页 中 的 
各 个 元 素 按 版 式 划分 放 入 表格 的 各 个 单元 格 中 ， 从 而 实现 复杂 的 排版 组 合 。 
table 布局 的 核心 在 于 设计 一 个 能 满足 版 式 要 求 的 表格 结构 ， 将 内 容 装 入 每 个 单元 格 


中 ， 间 距 以 及 空格 则 通过 插入 图 片 进行 占 位 来 实现 ， 最 终 的 结构 是 一 个 复杂 的 表格 ， 非 常 
不 利用 于 设计 与 修改 ， 如 图 4-25 所 示 。 


4-25 ”传统 表格 结构 布局 


另外 ， 在 表格 布局 的 代码 中 最 常见 的 是 HTML 标记 之 间 加 一 些 设计 代码 ， 像 
“width=100%” 或 者 “border=0” 等 。 表 格 布局 的 混合 代码 就 是 这 样 编写 的 ， 大 量 样式 设 
计 代 码 混 杂 在 表格 和 单元 格 之 中 ， 使 得 可 读 性 大 大 降低 ， 维 护 起 来 成 本 也 相当 高 。 


贱 注意 : 尽管 有 像 Dreamweaver 这 样 的 优秀 网 页 制作 软件 能 够 帮助 设计 者 可 视 化 地 
进行 这 些 代 码 的 编写 ， 但 是 Dreamweaver 永远 不 会 智能 地 帮助 用 户 缩减 代码 。 


复杂 的 表格 使 得 设计 极为 不 易 ， 修 改 更 加 复杂 ， 最 后 生成 的 网 页 代码 除了 表格 本 身 的 
代码 ， 还 有 许多 没有 意义 的 图 像 占 位 符 以 及 其 他 元 素 。 而 且 文 件 量 庞 大 ， 最 终 导 致 浏览 器 
下 载 及 解析 速度 变 慢 。 

而 使 用 CSS 布局 则 可 以 从 根本 上 改变 这 种 情况 。CSS 布局 的 重点 不 再 放 在 table 元 素 
的 设计 中 ， 取 而 代 之 的 是 HTML 中 的 另 一 个 元 素 DIV。DIV 可 以 理解 为 图 层 或 一 个 “区 
块 ”， 是 一 种 比 表格 简单 的 元 素 ， 从 语法 上 是 由 “<div>” 开 始 和 以 “</div>” 结 束 的 简单 
的 定义 。DIV 的 功能 仅仅 是 用 于 将 一 段 信息 给 标记 出 来 ， 用 于 后 期 的 样式 定义 ， 这 里 的 信 
息 标 记 就 是 前 面 所 提 到 的 网 页 的 “结构 ”部 分 。 通 过 DIV 的 使 用 ， 可 以 将 网 页 中 的 各 种 元 
素 划分 到 各 个 DIV 中 ， 成 为 网 页 中 的 结构 主体 ， 而 样式 表现 则 由 CSS 来 完成 。 

DIV 在 使 用 时 不 再 像 表 格 一 样 通过 其 内 部 的 单元 格 来 组 织 版 式 ， 而 是 通过 CSS 强大 的 
样式 定义 功能 ， 可 以 比 表 格 更 简单 、 更 自由 地 控制 页 面 的 版 式 及 样式 。 

例如 下 面 是 一 段 DIV 设计 的 代码 : 

<div id="header"> 内 容 </div> 

上 述 代码 在 页 面 中 定义 了 一 个 卫 是 header 的 div 标记 。 配 合 如 下 代码 : 


#header { 
background-color: #DDDDDD;  /* 设置 背景 颜色 */ 
padding: 5px; /* 设置 内 间距 */ 
line-height: 40px; /* 设置 行 高 */ 
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这 样 就 定义 了 一 个 名 称 为 “#header” 的 CSS 规则 ， 用 于 对 页 面 上 ID 是 “header” 的 
对 象 进行 样式 控制 。 

从 这 个 简单 的 CSS 样式 表 代 码 中 可 以 看 到 ，HTML 中 仅 保 留 了 div 标记 及 其 中 的 内 
容 ， 所 有 的 样式 代码 均 在 CSS 样式 表 文件 中 编写 。 这 也 就 是 实现 了 CSS 布局 的 “表现 与 
内 容 分 离 ”。 从 样式 设计 的 角度 来 看 ，CSS 对 当前 ID 名 为 header 的 div 定义 了 许多 属 
性 ， 如 上 边 距 、 宽 度 、 高 度 以 及 文本 对 齐 方式 等 样式 。 这 些 样式 有 些 在 HTML 标记 中 可 以 
直接 实现 ， 而 类 似 上 边 距 等 设计 则 是 HTML 本 身 所 不 具备 的 。 不 仅 如 此 ， 应 用 CSS 布局 
还 可 以 充分 提高 代码 的 利用 率 ， 效 率 也 大 大 提高 。 


4.4 布局 理论 


所 有 CSS 布局 技术 都 是 依赖 于 三 个 基本 概念 : 定位 、 浮 动 和 空白 边 的 操作 。 不 同 的 技 
术 其 实 没有 本 质 的 差异 ， 如 果 理 解 了 这 些 概念 ， 则 创建 自己 的 布局 和 理解 网 页 的 结构 是 相 
当 容 易 的 。 继 上 节 对 网 页 布局 的 介绍 之 后 ， 本 节 将 详细 介绍 布局 时 所 需 掌握 的 理论 知识 。 


人 4 区 块 的 概念 


理解 区 块 的 概念 是 理解 DIV+CSS 制作 页 面 的 基础 ， 区 块 控制 页 面 中 元 素 的 安排 和 显示 
方式 。 需 要 注意 区 块 的 实际 应 用 以 及 绝对 定位 和 相对 定位 ， 并 且 掌 握 如 何 控制 页 面 中 的 每 个 
元 素 。 通 常 在 使 用 CSS 设计 页 面 布 局 时 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 元 
素 框 。 元 素 框 描述 了 元 素 及 其 在 页 面 布局 中 所 占 的 空间 大 小 ， 因 此 元 素 框 可 以 影响 其 他 元 
素 的 位 置 及 大 小 。 例 如 ， 页 面 中 第 一 个 元 素 框 为 10px， 那 么 下 一 个 元 素 框 就 处 于 离 顶部 
10px 距离 的 位 置 。 如 果 第 一 个 元 素 框 增加 为 20px， 则 下 一 个 元 素 框 就 要 再 下 移 10px。 而 
整个 页 面 就 是 由 这 些 大 大 小 小 、 但 不 会 重合 的 元 素 框 形成 的 。 

在 设计 页 面 布局 时 ， 网 页 设计 者 要 充分 考虑 所 有 页 面 元 素 的 边框 与 元 素 框 之 间 的 边 距 
的 布置 ， 使 页 面 紧 凑 而 又 不 失 条 理 。 要 完全 理解 边 距 与 间隙 ,设计 者 就 必须 清楚 地 明确 各 
边 间 距 及 填充 的 位 置 ， 而 边 距 、 边 框 和 填充 及 内 容 共 同 构 成 了 一 个 区 块 ， 如 图 4-26 所 示 。 


图 4-26 ”区 块 示意 图 


从 示意 图 中 可 以 清楚 地 看 到 边 距 与 填充 所 控制 的 区 域 。 其 中 元 素 框 就 是 那个 最 深 阴影 
的 矩形 框 。 这 时 ， 有 的 读者 可 能 会 问 ， 边 距 和 填充 产生 的 作用 都 是 定义 距 边 界 的 距离 ， 两 
者 有 什么 区 别 呢 ? 其 实 ， 边 距 和 填充 最 大 的 区 别 就 是 背景 的 显示 ， 例 如 ， 可 用 如 下 代码 进 
行 区 分 : 

<p style="margin:30px; background-color:#179DF4; "> 

打造 一 流 IT 学 习 乐 园 ”推进 无 纸 化 教学 进程 

</p> 

<p style="margin:30px; padding:20px; background-color:#179DF4; "> 

打造 一 流 IT 学 习 乐 园 推进 无 纸 化 教学 进程 

</p> 


运行 效果 如 图 4-27 所 示 。 
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4-27 边 距 与 间隙 的 区 别 


从 中 可 以 看 出 ， 第 一 个 段落 只 设 定 了 边 距 ， 而 背景 色 只 显示 在 元 素 杠 区域， 这 说 明 背 
景色 不 作用 于 填充 。 第 二 个 段落 设 定 了 填充 ， 而 背景 色 除 了 显示 在 元 素 框 区 域 ， 也 获 盖 了 
填充 区 域 ， 这 说 明 背 景色 作用 于 填充 。 


4.4.2 定义 区 块 


我 们 知道 ， 区 块 由 内 容 、 边 距 、 填 充 及 边框 共同 构成 。 除 内 容 外 ， 其 他 都 是 可 选 的 ， 
这 就 会 产生 一 个 问题 。 例 如 ， 对 于 div 标记 ， 在 IE6 浏览 器 中 会 有 2 像素 的 边 距 ， 而 其 他 
浏览 器 则 没有 问题 。 解 决 方法 是 可 以 通过 将 元 素 的 margin 和 padding 设置 为 0 来 覆盖 这 个 
浏览 器 的 默认 值 。 实 现时 ， 可 以 分 别 进行 ， 也 可 以 使 用 通用 选择 器 对 所 有 元 素 进行 设置 。 
下 面 给 出 的 是 使 用 通用 选择 器 时 的 CSS 样式 : 
wi 
margin: 0; 
padding: 0; 
} 
另外 ， 在 CSS 中 的 width 和 height 属性 指 的 是 内 容 区 域 的 宽度 和 高 度 。 增 加 边框 、 边 
距 和 填充 不 会 影响 内 容 区 域 的 大 小 ， 但 是 会 增加 区 块 的 总 大 小 。 假 设 区 块 的 每 个 边 上 有 30 
像素 的 边 距 和 20 像素 的 填充 ， 如 果 希 望 这 个 区 块 的 宽度 达到 500 像素 ， 就 需要 将 内 容 的 
宽度 设置 为 400 像素 ，CSS 样式 如 下 : 
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#Page { 


width: 400px; 
margin: 30px; 
padding: 20px; 


} 


使 用 上 述 CSS 样式 后 ，Page 容器 所 定义 的 区 块 宽度 即 达到 了 500 像素 ， 图 4-28 中 给 
出 上 述 CSS 样式 的 作用 示意 。 


4.4.3 定位 


4-28 定义 区 块 


定位 是 CSS 设计 页 面 中 的 重要 概念 之 一 ， 用 于 控制 页 面 元 素 的 显示 方式 。 如 果 习 惯 于 
用 表格 来 控制 布局 ， 那 么 这 些 概念 最 初 可 能 有 点 复杂 ， 不 易 理 解 。 可 在 实际 使 用 过 程 中 逐 


渐 掌 握 区 块 的 复杂 性 。 
1， 绝对 定位 


定位 分 为 绝对 定位 和 相对 定位 两 种 类 型 。 


如 果 元 素 的 定位 类 型 为 绝对 定位 ， 那 么 其 显示 的 位 置 将 参照 浏览 器 左上 角 为 开始 点 ， 
其 偏 移 方 向 及 距离 将 配合 边 偏 移 属性 的 设 定 进 行 定 位 ， 并 且 是 浮动 于 正常 元 素 之 上 的 。 定 
义 了 绝对 定位 的 元 素 将 固定 于 页 面 中 的 某 个 区 域 ， 而 且 不 会 随 着 页 面 变化 而 变化 。 


如 果 元 素 中 还 包含 


边 偏 移 属性 值 而 设 定 的 
应 用 偏 移 属性 在 页 面 中 


有 边 距 和 间隙， 则 元 素 的 定位 是 在 元 素 总 的 区 域内 根据 绝对 定位 的 
， 如 图 4-29 所 示 。 图 中 的 灰色 区 域 显示 了 包含 边 距 和 间隙 的 元 素 块 
的 绝对 定位 。 


4-29 绝对 定位 示意 图 


I 
的 父 元 素 ， 那 么 它 的 位 置 相对 于 最 初 的 根 元 素 ， 通 常 是 HTML 页面。 


2.， 相对 定位 

相对 定位 是 以 上 级 元 素 的 原始 点 为 参照 点 ， 然 后 再 配合 偏 移 属性 对 元 素 块 进行 定位 。 
如 果 元 素 无 上 级 元 素 ， 则 以 body 元 素 为 参照 点 ， 如 果 上 级 元 素 有 边 距 或 间隙 属性 ， 则 参 
照 点 以 上 级 元 素 的 内 容 区 域 为 原始 点 进行 定位 ， 如 图 4-30 所 示 。 图 中 显示 设 定 了 边 偏 移 属 
性 的 元 素 块 在 应 用 相对 定位 之 后 是 相对 其 上 级 元 素 的 内 容 进 行 定位 的 。 
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4-30 相对 定位 示意 图 


Dn 
此 ， 移 动 元 素 时 会 导致 覆盖 其 他 块 。 


4.4.4 实战 一 一 具有 固定 位 置 的 广告 杠 


很 多 网 站 通常 会 在 页 面 中 放置 一 些 广告 框 。 当 然 ， 如 果 将 广告 作为 页 面 模块 ， 显 得 不 
够 醒目 。 所 以 很 多 站 长 喜欢 把 广告 做 成 一 直 悬 停 在 页 面 的 侧 边 栏 上 。 这 样 可 以 弥补 页 面 的 
空白 ， 也 可 以 使 广告 更 加 醒目 。 

要 实现 上 面 的 效果 ， 通 常 的 做 法 是 使 用 JavaScript 控制 广告 模块 的 位 置 ， 这 种 做 法 有 
一 种 拖 搜 的 延迟 效果 。 其 实 利用 布局 中 的 绝对 定位 也 可 以 使 广告 框 固定 在 浏览 器 窗口 的 某 
一 位 置 。 这 样 在 浏览 器 中 页 面 滚动 的 时 候 广 告 似乎 和 窗口 是 浑 色 pe 顷 特 or 油 仿 雁 仿 是 动 。 

具体 步骤 如 下 。 WE ; 

国 于 07| 凶 奸 一 个 名 为 position html 的 HTML 文件。 没有 设 定 边 侦 移 局 性 

力 国 02| 在 文件 所 在 目录 下 新 建 imgs 目录 存放 网 页 的 图 片 素材 ， 新 建 css 目录 存放 

样式 表 文 件 。 

医 罚 03] 在 css 目录 中 创建 一 个 CSS 样式 表 文件 ， 命 名 为 “position.css”。 

国 习 04| 修改 position css 文件 ， 添 加 样式 表 代 码 ， 如 下 所 示 : 
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Q@charset "utf-8"7 
/* CSS Document */ 


#ad { 
background-image:url(../imgs/ad bg.gif); 
height: 126px; 
width: 211px7 
bottom: 0; 
rkghtes OZ 
position: fixed; 
padding: 9px; 
font-family: "宋体 "，Arial; 


1 

#ad span { 
margin: 0 0 0 15px; 
font-size: 14px; 
font-weight: 700; 
color: #FFF; 

, 

#ad ul 1i { 


color: #FFF; 
font-size: 12px; 
padding: Spx; 
| 
打开 position html 文件 ， 在 head 部 分 引入 刚才 创建 的 CSS 样式 表 文件 ， 代 
码 如 下 : 
<link rel="stylesheet" type="text/css" href="css/position.css"/> 
在 页 面 body 部 分 添加 显示 QQ 群 号 信息 的 页 面 元 素 ， 代 码 如 下 : 
<div id="ad"> 


<span> 窗 内 QQ 群 号 </span> 


<ul> 
<1li>QQ 群 1: 33925615</1i> 
<1i>QQ 群 2: 45368980</1i> 
<1i>QQ 群 3: 107423140</1i> 
<1i>QQ 群 4: 7858178</1i> 
</ul> 


</div> 


国 习 07|] 在 position html 文件 中 添加 其 他 的 页 面 内 容 ， 最 后 保存 文件 。 
国 则 08| 在 Chrome 浏览 器 中 运行 position html 页 面 ， 运 行 结果 如 图 4-31 所 示 。 
在 本 示例 中 使 用 CSS 设置 广告 框 ad 的 背景 、 宽 度 、 高 度 、 字 体 、 内 填充 ， 以 及 设置 
告 框 的 定位 方式 为 固定 定位 ， 而 且 广 告 框 右边 和 下 边 的 位 置 都 为 0， 即 紧 贴 浏览 器 内 容 
框 的 边缘 ,这样 该 广告 框 将 始终 固定 显示 在 浏览 器 的 右 下 角 。 其 他 样式 表 则 定义 了 广告 框 
里 的 文本 样式 和 边 距 等 信息 。 
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图 4-31 固定 定位 广告 框 的 运行 结果 


4.4.5 ”空白 边 又 加 


简单 地 说 ， 当 两 个 垂直 空白 边 相 遇 时 ， 它 们 将 形成 一 个 空白 边 。 这 个 空白 边 的 高 度 等 
于 两 个 发 生 炙 加 的 空白 边 中 的 较 大 者 。 

当 一 个 元 素 出 现在 另 一 个 元 素 上 面 时 ， 第 一 个 元 素 的 低空 白 边 与 第 二 个 元 素 的 顶 空白 
边 发 生姜 加 。 例 如 下 面 的 CSS 样式 代码 : 


#Boxl1 { 
height: 40px; 
border: lpx solid #000; 
margin: 30px; 
background-color: #CCC; 
} 
#Box2 { 
margin: 30px; 
border: lpx solid #000; 
background-color: #CCC; 
height: 40px; 
} 


两 个 元 素 的 空白 边 登 加 效果 如 图 4-32 所 示 。 


SSssssssss | 
二 一 SEE 
SS<s<ss 


ET ax 0 IKE7 1 Wicode UP 


4-32 ”空白 边 友 加 
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当 一 个 元 素 包 含 在 男 一 个 元 素 中 时 (假设 没有 填充 或 边框 将 空白 边 分 隔 开 )， 它 们 的 顶 
和 底 空白 边 也 会 发 生 倒 加 。 还 有 一 种 情况 ， 假 设 有 一 个 空 元 素 ， 它 有 空白 边 ， 但 是 没有 边 
框 和 填充 。 在 这 种 情况 下 ， 顶 空白 边 与 底 空白 边 就 磁 到 了 一 起 ， 此 时 也 会 发 生 炙 加 。 

空白 边 合 加 初 看 上 去 可 能 有 点 奇怪 ， 但 是 它 实 际 上 是 有 意义 的 。 以 由 多 个 段落 组 成 的 
典型 文本 页 面 为 例 ; 第 一 个 段落 上 面 的 空间 等 于 段落 的 项 空白 边 ， 如 果 没 有 空白 边 合 加， 
那么 后 续 所 有 段落 之 间 的 空白 边 将 是 相 邻 项 空白 边 和 底 空白 边 的 和 ， 这 意味 着 段落 之 间 的 
空间 是 页 面 顶 部 的 两 倍 ; 如 果 发 生 空白 边 合 加 ， 段 落 之 间 的 顶 空白 边 和 底 空白 边 就 合 加 在 
一 起 ， 这 样 各 种 距离 就 一 致 了 ， 如 图 4-33 所 示 。 


三 - 


4-33 ”维护 段落 间距 的 空白 边 


De 
绝对 定位 块 之 间 的 空白 边 是 不 会 登 加 的 。 

解决 空白 边 倒 加 问题 的 方法 是 在 登 加 段落 间 添 加 如 下 代码 即 可 : 

<div style="clear:both"></div> 

但 是 要 注意 ， 有 时 候 的 空白 边 登 加 问题 不 需要 解决 ， 例 如 在 显示 大 段 文本 或 段落 时 。 
此 ， 读 者 在 实际 设计 页 面 时 ， 应 该 区 分 何 时 希望 产生 人 加， 并 加 以 处 理 。 


Ea 


4.5 ”实战 一 一 制作 网 页 导航 条 


每 个 网 页 都 有 一 个 导航 条 ， 它 通常 位 于 页 面 Logo 的 下 方 ， 呈 水 平方 向 显示 。 导 航 条 
可 以 使 网 站 的 结构 比较 清晰 ， 更 容易 阅读 和 维护 。 
本 次 实战 将 使 用 HTML 中 的 局 列表 元 素 配 合 CSS 实现 一 个 漂亮 的 网 页 导航 条 。 


具体 步 又 如 下 。 
国 轨 01| 创建 一 个 名 为 menu html 的 HTML 文件 。 
国 轨 02|】 打开 menu.html 文件 并 进行 编辑 ， 添 加 如 下 导航 条 代码 : 


<div id="menubar"> 
<ul> 

<li><a href="#"><span>Home</span></a></1i> 
<1i><a href="#"><span>MyPhoto</span></a></1i> 
<1i><a href="#"><span>MyArticle</span></a></1i> 
<li><a href="#"><span>MyFamily</span></a></1i> 
<li><a "><span>MyScroll</span></a></1i> 
<li><a href="#"><span>MyFriend</span></a></1i> 
<li><a href="#"><span>Message</span></a></1i> 


</ul> 
</div> 
在 HTML 文件 下 创建 css 目录 ， 并 在 css 目录 中 创建 一 个 名 为 style.css 的 
文件 。 
编辑 style.css 文件 ， 添 加 如 下 样式 代码 ; 


@charset "utf-8"; 


body { 
background-image: url(../imgs/display bg.jpg) 
} 
eg lh 
margin: 0; 
padding: 0; 
} 
#menubar { 
margin: 180px 0 0 0; 
height: 24px; 
font-size: 14px; 
border-bottom: lpx solid #E276A7; 
#menubar 1i { 
display: inline; 
} 
#menubar a { 
float: left; 
background: url("../imgs/m left.gif") no-repeat left top; 
padding: 0 0 0 4px; 
text-decoration: none; 
} 
#menubar a span { 
display: block; 
background: url("../imgs/m right.gif") no-repeat right top; 
padding: Spx 15px 4px 6px; 
Color: #333; 
} 


国事 05| 在 menu html 页 面 的 head 部 分 中 添加 对 CSS 样式 表 文件 style css 的 引用 ， 
代码 如 下 : 


宣 闭 鞍 将 北 吧 避 直上 小 驴 


SS 


8 rm 5 与 CSS 3 网 页 设计 入 门 与 提高 


<link rel="stylesheet" type="text/css" href="css/style.css"/> 


国 轨 06| 在 chrome 浏览 器 中 运行 menuhtml 页 面 ， 运 行 结果 如 图 4-34 所 示 。 


3 © Db file///D/wwwRoot/menu.html 


KE 


4-34 ” 横 排 的 列表 元 素 


4.6 实战 一 一 制作 文本 环绕 图 片 


像 很 多 报纸 上 的 版 块 一 样 ， 一 篇 新 闻 往往 附带 一 张 或 多 张 图 片 ， 这 些 图 片 多 是 对 新 闻 
内 容 的 一 个 说 明 。 为 了 将 适当 的 图 片 放置 到 适当 的 位 置 上 ， 而 且 既 美观 又 节省 页 面 资源 ， 
往往 会 使 用 文字 环绕 的 效果 布局 页 面 。 当 然 ， 很 多 网 站 或 博客 也 大 量 使 用 这 种 方式 来 布局 
网 页 。 

环绕 效果 节省 了 页 面 中 大 量 的 空白 ， 使 页 面 显 得 更 加 紧凑 。 下 面 我 们 利用 布局 的 浮动 
来 实现 一 个 文字 环绕 的 图 片 效果 。 

具体 步骤 如 下 。 

步 创建 一 个 名 为 index2.html 的 HTML 文件 。 
芝 罚 02| 打开 index2.html 文件 并 进行 编辑 ， 添 加 如 下 页 面 代码 : 
<div id="content"> <img src="imgs/15.jpg" class="box" /> 
<p> ”下 载 是 指 通过 网 络 进行 传输 文件 ， 把 互联 网 或 其 他 电子 计算 机 上 的 信息 保存 到 本 地 电脑 
上 的 一 种 网 络 活动 。 下 载 可 以 显 式 或 隐 式 地 进行 ， 只 要 是 获得 本 地 电脑 上 所 没有 的 信息 的 活动 ， 都 
可 以 认为 是 下 载 ， 如 在 线 观 看 视频 。</p> 
<p> ”下 载 是 指 通过 网 络 进行 传输 文件 ， 把 互联 网 或 其 他 电子 计算 机 上 的 信息 保存 到 本 地 电脑 
上 的 一 种 网 络 活动 。 下 载 可 以 显 式 或 隐 式 地 进行 ， 只 要 是 获得 本 地 电脑 上 所 没有 的 信息 的 活动 ， 都 
可 以 认为 是 下 载 ， 如 在 线 观 看 视频 。</p> <p> ”下 载 是 指 通 过 网 络 进行 传输 文件 ， 把 互联 网 或 
其 他 电子 计算 机 上 的 信息 保存 到 本 地 电脑 上 的 一 种 网 络 活动 。 下 载 可 以 显 式 或 隐 式 地 进行 ， 只 要 是 
获得 本 地 电脑 上 所 没有 的 信息 的 活动 ， 都 可 以 认为 是 下 载 ， 如 在 线 观 看 视频 。</p> 
</div> 
医 罚 03| 在 css 目录 中 创建 一 个 CSS 文件 ， 命 名 为 box.css。 
国 习 04] 编辑 box.css 文件 ， 添 加 如 下 CSS 样式 代码 : 


Q@charset "utf-8"; 


body { 
background-image: url(../imgs/float bg.gif); 
padding: 70px 0 0 50px; 


} 

#content { 
font-size: 13px; 
font-family: "宋体 "，Arial; 
color: #666; 
width: 550px; 
line-height: 21px; 

} 


#content .box { 

float: right; 

width: 173px; 

height: 192px; 

margin: 10px; 

border: 2px solid #999; 
} 


在 index2.html 页 面 的 head 部 位 引入 box.css 文件 ， 代 码 如 下 : 
<link rel="stylesheet" type="text/css" href="css/box.css"/> 
在 Chrome 浏览 器 中 运行 index2.html 页 面 ， 运 行 结果 如 图 4-35 所 示 。 


门 制作 文本 环 奖 图 片 x 本 
€ © [file///D:/wwwRoot/index2.html 


下 载 是 指 通 过 网络 进行 传输 文件 ， 把 互联 了 或 其 他 电子 计 
算 机 上 的 信息 保存 到 本 地 电脑 上 的 一 种 网 下 

式 或 隐 式 地 进行 ， 只 要 是 获 介 小 地 电脑 上 所 没有 的 信息 的 活 
动 ， 都 可 以 认为 是 下 载 ， 如 在 线 观看 视频 。 


下 载 是 指 通过 网 络 进行 传输 文件 ， 把 互联 隐 或 其 他 电子 计 
算 机 上 的 信息 保存 到 本 地 电脑 上 的 一 种 网 络 舌 起。 下载 可 以 显 
式 或 隐 式 地 进行 ， 只 要 是 获得 本 地 电脑 上 所 没有 的 信息 的 笑 
动 ， 都 可 以 认为 是 下 载 ， 如 在 线 观看 视频 。 


是 指 通过 网 络 进行 传输 文件 ， 把 互联 
算 机 上 的 信息 保存 到 本 地 电脑 上 的 一 % 
式 或 隐 式 地 进行 ， 只 要 是 获得 本 地 电 | 没 9 活动 ， 都 可 以 认为 是 下 载 ， 如 在 线 观看 
视频 。 


4-35 ”文字 环绕 效果 


4.7 ”实战 一 一 制作 三 栏 博 客 页 面 


我 们 曾经 在 网 页 设计 中 大 量 地 运用 表格 来 进行 布局 ， 而 学 习 了 DIV+CSS 布局 之 后 ， 


我 们 要 思考 的 是 如 何不 用 表格 ， 而 用 DIV 容器 以 及 CSS 和 XHTML 来 控制 实现 一 个 不 但 
文件 体积 小 ， 而 且 内 容 和 页 面 更 具 亲 和 力 的 效果 。 本 次 实战 我 们 来 一 步 一 步 地 学 习 如 何 基 


于 CSS 建立 一 个 包含 三 列 的 博客 页 面 。 


为 了 方便 讲解 ， 示 例 中 使 用 了 Dreamweaver 工具 。 主 要 步骤 如 下 。 

从 菜单 栏 中 选择 “文件 ”一 “新 建 ” 命 令 ， 打 开 “ 新 建文 档 ” 对 话 框 ， 选 
择 “ 空 白 页 ”选项 卡 ， 在 “页 面 类 型 ”中 选择 “HTML”， 在 “布局 ”中 选择 
“无 ”， 在 “文档 类 型 ”下 拉 列 表 框 中 选择 “XHTML 1.0 Transitional”， 单 击 
“创建 ”按钮 ， 如 图 4-36 所 示 。 


N 


主将 王将 半 起 呈 习 协 p 没 锐 
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BB mem 
二 mre 
团 滞 


| 


附加 Css 文件 四 


图 4-36 “新 建文 档 ” 对 话 框 


加 国 02| 在 “文档 ”工具 栏 的 “标题 ”文本 框 中 输入 “我 的 个 人 博客 ”， 保 存 文 
档 。 首 先 创 建 基本 的 HIML 结构 ， 切 换 到 代码 视图 和 设计 视图 ， 在 “文档 ”窗口 
中 <body> 标 记 内 输入 如 下 代码 ( 见 图 4-37)。 基 本 的 布局 包含 5 个 div， 即 标题 、 
页 脚 和 三 栏 。 标 题 和 页 脚 占据 整个 页 宽 。 

<div id="header"></div> 

<div id="left"></div> 

"right"></div> 

middle"></div> 

<div id="footer"></div> 


03] 在 id 为 header 的 标记 中 输入 文字 ， 设 为 1 级 标题 ， 作 为 网 页 的 标题 内 容 ， 
如 图 4-38 所 示 。 


DE:\nyRoot\dwcsd\Blog\index. htal (XHTML)* 
7 pea 
ae 
caml yans="htep: /rw v3. org/1993/xhrmi"> <hl>Norhing 1s inpossible, 1 your heart 13 willing:/hl> 
he 
hetp-equiv"Content-Type" content="text/htnl; casrset=utt-3" /> 好 3d-"leftr>c1dte 


ER 
- Nothing is impossible, if your heart is 
创建 willing 


EL Waid OF) me i EY Wiad ry 


图 4-37 定义 页 面 标题 和 结构 图 4-38 设置 博客 标题 文字 


在 id 为 left 的 标记 中 输入 “网 站 目录 ”， 设 为 3 级 标题 ， 然 后 插入 无 序列 
表 ， 输 入 网 站 目录 作为 网 页 的 左 侧 边栏 ， 代 码 如 下 ( 见 图 4-39): 


<h3> 网 站 目录 </h3> 
< 
<1i><a href="#"> 日 志 </url></a></1i> 


N 


<1i><a href="#"> 相 册 </url></a></1i> 
<1i><a href="#"> 收 藏 </url></a></1i> 
<1i><a href="#"> 好 友 </url></a></1i> 
<1i><a href="#"> 群 组 </url></a></1i> 
<1i><a href="#"> 我 参与 </url></a></1i> 
<l1i><a href="#"> 个 人 资料 </url></a></1i> 
</al> 


力 玫 05| 在 id 为 right 的 标记 中 输入 “最 近 发 表 ”， 设 为 3 级 标题 ， 然 后 插入 无 序 
列表 ， 输 入 最 新 发 表 的 文章 列表 ， 作 为 网 页 的 右 侧 边栏 ， 如 图 4-40 所 示 。 


宣 关 三 风 寺 示 呈 习 机 ?法 居 


ME: \ayRoot\dwcsd\Blog\index. htal (XHTEL)* 


horains is inpossible, if your heart ia willinge /nl> 
MN 1 -aa 

<div 1de" lett"> 

n> 好 </ha> 


EL a amido Dave (WE A ow ee ev L/D toad OO) 
4-39 ”设置 左 侧 栏目 内 容 4-40 设置 右 侧 栏目 内 容 
在 这 为 middle 的 标记 中 输入 文章 正文 ， 标 题 设 为 2 级 ， 如 图 4-41 所 示 。 


ty duoatddlem 
<h2s 量 稼 肖 的 林 西 是 旬 内 的 Ab2> 

<br /> 。 个 邵 此 范 ， 在 这 个 世界 上 ， 是 珍 淄 的 未 本 是 免费 的 。 。 <bz /> 

阳 兴 ， 是 免费 的 。 邯 芝 众 生 ， 没 有 淮 能 名 襄 开 阳光 活 下 去 ; 然而 ， 从 小 到 大 ， 
可 曾 有 谁 为 自己 享用 过 的 阳光 之 付 过 一 分 钱 ? cbr 

空气 ， 是 免费 的。 一 个 人 只 要 活 若 ， 要 浊 搜 Hg0 宇 。 可 从 古 至今， 又 200: 
吕 和 公司 版权 也 有 
atm 
acdr 


! CopyE: 
邦人 六 在 这 个 世界 上 ， 景 珍 员 的 东西 是 免费 的 。 汇 智 科技 公司 RE 有 | 
: 免费 的 。 基 莽 众 生 ， 没 有 谁 能 够 识 开 阳光 活 下 去 ， 然 而 ， 从 小 到 
二 | 已 专 孚 ; 人 证 一 分 钱 7 
nay) Ci vni dd ey Gay [I Ce oo a ay So « Ao ZF /| 各 niesds (TF-A) 


图 4-41 设置 文章 标题 和 正文 内 容 图 4-42 设置 页 脚 内 容 


现在 我 们 有 了 一 个 完整 的 、 没 有 经 过 修饰 的 XHTML 文档 ， 下 面 可 以 运用 
CSS 来 控制 它 的 布局 了 。 首 先是 调整 <body>， 设 置 边 距 和 填充 都 为 0， 背 景 颜色 
为 #BEBFC1， 字 体 大 小 为 12 像素 ， 行 高 为 20 像素 。 将 文档 切换 到 代码 窗口 ， 在 
<head> 标 记 中 输入 如 下 代码 ( 见 图 4-43): 


<style type="text/css"> 
< 
body { 
margin: Opx; 
padding: Opx; 
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background-color: #BEBFC1; 
font-size: 12px; 
line-height: 20px; 

3 

一 -> 

</style> 


全 FE:\myRoot\dwcst\Blog\index.htal (XHTEL) 


-152 x l22v 2 K/ 1 Unicode QTF-6) 


4-43 ”定义 body 样 式 


贱 注意 : 有 些 低 版 本 的 浏览 器 不 能 识别 style 标记 ， 这 意味 着 低 版 本 的 浏览 器 会 忽 
略 style 标记 里 的 内 容 ， 并 把 style 标记 里 的 内 容 以 文本 方式 直接 显示 到 页 面 上 。 为 了 避 
免 这 样 的 情况 发 生 ， 可 以 用 加 HTML 注释 的 方式 (<!-- 注 释 -->) 隐 藏 内 容 而 不 让 它 显 示 。 


接 下 来 调整 标题 部 分 ， 用 clear 的 属性 确保 浮动 部 分 不 会 占据 标题 空间 ， 标 
题 部 分 的 高 度 为 50 像素 ， 背 景 颜色 为 #D01F3C， 填 充 为 20 像素 ， 并 且 设 置 字体 
颜色 为 白色 和 垂直 居中 显示 。 在 style 标记 中 加 入 如 下 代码 ( 见 图 4-44): 


div#header { 
clear: both; 
height: S50px; 
background-color: #D01F3C; 
padding: 20px; 
vertical-align: middle; 
Color: #FFFFFF; 

| 


国事 10| 然后 调整 <left> 使 它 浮动 在 页 面 左 方 ， 宽 度 为 150 像素 ， 背 景 颜色 为 白色 ， 
上 端 距 标题 20 像素 ， 左 边 距 5 像素 ， 填 充 5 像素 。 在 style 标记 中 加 入 如 下 代码 
( 见 图 4-45): 


div#left { 
float: left; 
width: 150px; 
background-color: #FFFFFF; 
margin-top: 20px; 
padding: Spx; 
margin-left: Spx; 


人 OE: \aykoot\dwcsd\Blog\inder. htal (XHTEL) EE: iwcsd\Blog\index. htal (XHTEL) 


低潮 琵 将 站 涛 别 副 山 革 仿 


5 a 
S92 x 150~ 3 F/M eods QTE-S) a ine a | 
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4-44 ”定义 标题 部 分 样式 4-45 ”定义 左 侧 栏目 样式 


调整 <right> 使 它 浮动 在 页 面 右 方 ， 宽 度 为 150 像素 ， 背 景 颜色 为 
#9EBEF， 上 边 距 20 像素 ， 右 边 距 5 像素 ， 填 充 5 像素 。 在 style 标记 中 加 入 如 
下 代码 ( 见 图 4-46): 


div#right { 
float: right; 
width: 150px; 
background-color: #E9EBEF; 
margin-top: 20px; 
margin-right: Spx; 
padding: Spx; 


} 

此 时 已 经 可 以 看 初步 效果 了 ， 我 们 再 来 调整 middle， 使 布局 看 起 来 更 合 
- 些 。 设 置 它 的 边 距 为 0， 上 方 填充 0 像素 ， 下 方 填充 5 像素 ， 左 边 和 右边 填充 
175 像素 。 在 style 标记 中 加 入 如 下 代码 ( 见 图 4-47): 


div#middle { 
padding-top: Opx; 
padding-right: 175px; 
padding-bottom: 5px; 
padding-left: 175px; 
margin: Opx; 


DE: \aykoot\dwcsd\Blog\index. htal (XHTL) 


mn. I 
阳光 ， 是 旬 的。 大众 生 ， 流 有 肖 中 。 浊 民 的 上 个 当 攻 


划 忆 的 十 五 个 棕 本 
! 和 E “世界 量 币 大 的 管 到 怀 | 
阳光 活 下 去 然而 。 从 4 到 大 可 浊 有 有 淮 ; 。。 . 志 呈 中 mE 避 | me | 国 
[om 2 x i149 3 E71 toied QTEe) Ow ~ S00 x la- SE /1 Hh icsds mp 


图 4-46 定义 右 侧 栏目 样式 图 4.47 “定义 正文 样式 ~ 
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二 注意 : 代码 中 各 部 分 出 现 的 顺序 是 非常 重要 的 。 左 栏 和 右 栏 div 必须 在 中 栏 之 前 

出 现 。 这 样 才 可 以 让 这 两 个 边栏 浮动 到 它们 的 位 置 上 (屏幕 两 侧 )， 并 让 中 栏 的 内 容 “ 流 ”入 
它们 之 间 的 空间 。 如 果 浏 览 器 在 一 个 或 者 两 个 边栏 div 之 前 先 发 现 中 栏 ， 那 么 中 栏 将 占据 屏 
幕 的 一 侧 或 者 两 侧 ， 这 样 浮动 的 部 分 就 会 跑 到 中 栏 的 下 面 而 不 是 中 栏 的 旁边 了 。 


国 加 13| 最 后 调整 footer， 这 里 clear 声明 用 来 确保 浮动 部 分 不 会 占据 页 脚 的 空间 ， 
背景 颜色 为 #4828282， 填 充 为 10 像素 ， 文 本 居中 显示 。 在 style 标记 中 加 入 如 下 
代码 ( 见 图 4-48): 

div#footer { 
clear: both; 
background-color: #828282; 
padding: 10px; 
text-align: center; 


4-48 ”定义 底部 样式 


加 玉 14| 一 个 简单 使 用 三 栏 布局 博客 网 站 首页 的 效果 制作 完毕 ， 保 存 文档 并 在 浏览 
器 中 预览 ， 最 终 效果 如 图 4-49 所 示 。 


Nothing is impossible，if your heart is willing 


4-49 博客 首页 


NN 


4.8 CSS 设计 规范 


要 想 写 出 兼容 性 好 ， 不 容易 出 错 的 CSS 样式 规则 ， 需 要 读者 经 常 练习 CSS。 在 练习 中 
逐渐 掌握 CSS 规则 对 各 种 浏览 器 的 兼容 情况 ， 并 形成 编写 习惯 。 下 面 给 出 一 些 定义 CSS 
规则 时 的 建议 及 规范 。 

(1) 使 用 子 选择 器 。 

很 多 CSS 初学 者 设计 的 样式 规则 多 、 杂 、 乱 ， 而 且 效 率 非常 低 。 其 实 善 于 使 用 CSS 
的 子 选择 器 可 以 在 很 大 程度 上 提高 效率 ， 还 可 以 减少 代码 量 。 

假设 在 页 面 中 有 如 下 HTML 布局 代码 : 


<div id=subnav> 

<ul> 

<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></1i>> 

<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1 
</a> </1i> 

<1li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </1i> 
</ul> 

</div> 


通常 情况 下 ， 初 学 者 会 编写 出 类 似 如 下 的 CSS 样式 : 


div#subnav ul { /* Some styling */ } 

div#subnav ul li.subnavitem { /* Some styling */ } 

div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } 
div#subnav ul li.subnavitemselected { /* Some styling */ } 
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some 
styling */ } 


现在 对 上 面 的 HTML 布局 进行 优化 ， 改 良 后 的 代码 如 下 : 


<ul id=subnav> 

<1i> <a href=#> Item 1</a> </1i> 

<1i class=sel> <a href=#> Item 1</a> </1i> 
<1i> <a href=#> Item 1</a> </1i> 

</ul> 


经 过 改良 之 后 ，HTML 布局 结构 非常 清晰 ， 此 时 使 用 CSS 的 子 选择 器 可 以 使 代码 更 加 
简洁 和 容易 阅读 。 如 下 所 示 : 


#subnav { /* Some styling */ } 
#subnav 1i { /* Some styling */ } 
#subnav a { /* Some styling */ } 
#subnav .sel { /* Some styling */ } 
#subnav .sel a { /* Some styling */ } 


(2) 省 略 class 和 id 前 的 元 素 限 定 。 

当 在 HTML 页 面 中 为 元 素 定义 一 个 class 或 者 id 后 ， 如 果 要 为 该 元 素 定义 CSS 样式 ， 
可 以 省 略 规则 名 称 前 的 元 素 名 。 因 为 ID 在 一 个 页 面 里 是 唯一 的 ， 而 class 可 以 在 页 面 中 多 。 “~ 
次 使 用 ， 所 以 限定 某 个 元 素 是 毫 无 意义 的 。 例 如 下 面 的 CSS 样式 : \ 
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div#content { /* declarations */ } 
fieldset.details { /* declarations */ } 


经 过 优化 ， 省 略 元 素 名 称 后 的 CSS 样式 代码 如 下 : 


#content { /* declarations */ } 
.details { /* declarations */ } 


(3) 设置 默认 值 。 

通常 padding 的 默认 值 为 0，background-color 的 默认 值 是 transparent。 但 是 不 同 的 浏 
览 器 默认 值 可 能 不 同 。 为 了 避免 默认 值 不 一 致 导 致 的 效果 错误 ， 可 以 在 样式 表 一 开始 就 定 
义 所 有 元 素 的 margin 和 padding 值 都 为 0。 示例 代码 如 下 : 


二 
margin: 0; 
padding: 0; 


} 


(4) 最 近 优 先 原则 。 

如 果 在 HTML 页 面 针对 同一 个 元 素 的 CSS 定义 有 很 多 ， 此 时 最 接近 元 素 的 CSS 定义 
优先 级 最 高 。 假 设 有 如 下 一 段 HTML 代码 : 

<p class=update > 您 好 ， 超 级 管理 员 </p> 


在 CSS 文件 中 使 用 如 下 代码 为 p 元 素 定义 样式 : 

pi 

margin: lem 0; 

font-size: lem; 

color: #333; 

} 

-update { 

font-weight: bold; 

color: #600; 

| 

上 述 两 个 规则 中 ，.update 样式 将 优先 被 使 用 ， 因 为 页 面 中 的 class 比 p 更 接近 内 容 。 

(5) 区 分 大 小 写 。 

在 XHTML 中 使 用 CSS 时 要 注意 ，CSS 定义 的 元 素 名 称 是 区 分 大 小 写 的 。 为 了 避免 这 
种 错误 ， 建 议 所 有 的 定义 名 称 都 采用 小 写 。 另 外 ，class 和 id 的 值 在 HIML 和 XHTML 中 
也 是 区 分 大 小 写 的 。 所 以 ， 如 果 大 小 混合 时 ， 一 定 要 要 注意 CSS 定义 名 称 与 页 面 中 使 用 的 
应 当 是 一 致 的 。 

(6) 明确 定义 单位 ， 除 非 值 为 0。 

只 定义 数值 ， 而 忽略 数值 的 单位 是 很 多 CSS 新 手 常 犯 的 错误 。 在 HTML 中 可 以 简写 
“width=100”， 但 是 在 CSS 中 ， 必 须 给 一 个 准确 的 单位 ， 例 如 “width:100px ”或 者 
“width:100em”。 但 是 ， 在 两 种 情况 下 可 以 忽略 单位 ， 即 行 高 和 0 值 。 除 此 以 外 ， 其 他 值 
都 必须 紧 跟 单位 ， 而 且 不 要 在 数值 和 单位 之 间 加 空格 。 

(7) 不 需要 重复 定义 可 继承 的 值 。 
CSS 子 元 素 会 自动 继承 父 元 素 的 属性 值 ( 像 颜 色 、 字 体 等 )。 因 此 ， 已 经 在 父 元 素 中 定 


CO 


义 过 的 样式 ， 子 元 素 可 以 直接 继承 ， 不 需要 重复 定义 。 但 是 要 注意 ， 浏 览 器 可 能 用 一 些 默 
认 值 覆盖 继承 的 定义 。 

(8) 多 重 class 定义 。 

一 个 元 素 可 以 同时 定义 多 个 class。 例 如 下 面 的 代码 定义 了 两 个 样式 : 


-one {width:200px; background:#666;} 
-two {border:1l0px solid #F00;} 


第 一 个 样式 设置 宽度 为 200 像素 ， 背 景 颜色 为 #666; 第 二 个 样式 设置 10 像素 边框 。 

假设 在 HTML 页 面 中 使 用 如 下 代码 应 用 这 两 个 样式 : 

<div class="one two"></div> 

此 时 的 最 终 效 果 将 合并 两 个 样式 的 内 容 ， 即 显示 为 宽度 200 像素 、 背 景 颜色 为 #666， 
而 且 边框 为 10 像素 。 

(9) 使 用 CSS 缩写 。 

使 用 缩写 可 以 有 效 减少 CSS 文件 的 大 小 ， 更 加 容易 阅读 。 
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4.9 本 章 习题 


1. 填空 题 
(1) Adobe 公司 的 产品 是 功能 最 强大 的 网 页 设计 工具 。 

(2) 在 下 6 中 要 让 所 有 页 面 元 素 居 中 ， 应 该 将 text-align 属性 设置 为 2 
(3) 自 适 应 布局 中 的 布局 使 用 百分数 来 设置 尺寸 。 

(4) 为 防止 弹出 窗口 出 现 水 平 滚动 条 ， 需 将 body 元 素 的 


2. 选择 题 
(1) 如 果 页 面 中 一 个 DIV 元 素 被 设置 了 以 下 样式 : 


#div { 
width: 100px; 
height: 100px; 
position: absolute; 
CoD: OF 
left: 0; 
right: O08 
bottom: 0; 

} 


那么 该 元 素 将 显示 在 站 
A. 页 面 左上 角 B. 页 面 右 下 角 
C. 窗口 右上 角 D. 窗口 左下 角 
(2) 当 两 个 垂直 空白 边 相 遇 时 ， 它 们 将 形成 一 个 空白 边 。 这 个 空白 边 的 高 度 等 于 两 忆 
发 生 司 加 的 空白 边 中 的 。 Ey a 
A.， 较 小 者 B. 较 大 者 C. 平均 值 D. 之 和 ( 


属性 设置 为 100%。 


字 
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(3) 下 列 不 属于 常见 布局 结构 的 是 


A. 工 字 布局 结构 B. 国字 布局 结构 

C. 扬 角 型 布局 结构 D. 左右 型 布局 结构 
(4) 假设 有 如 下 的 样式 代码 ， 运 行 后 box 的 宽度 是 : 
#box { 


width: 100px; margin: 1l0px; padding: 10px; 
| 


A. 140px B. 120px C. 110px D. 100px 
3. 上 机 练习 
根据 本 章 学 习 的 布局 知识 ， 在 HTML 中 绘制 一 个 如 图 4-50 所 示 的 产品 介绍 页 面 。 注 
意 页 面 中 区 块 的 定义 ， 以 及 位 置 的 控制 。 


4-50 ”示例 运行 的 效果 


认识 HTML 5 


HTML 5 从 字面 上 很 容易 理解 : 就 是 HTML 技术 标准 的 第 5 版 。 大 家 通常 
所 说 的 HIML 5 一般 是 指 以 HIML 5、CSS 3 和 JavaScript 为 代表 的 最 新 Web 技 
术 ( 或 标准 )， 其 中 HIML 5 和 CSS 3 负责 界面 和 内 容 呈 现 ，JavaScript 则 负责 逻 
辑 处 理 。 随 着 HTML 5 的 不 断 发 展 ， 它 已 经 成 为 Web 开发 的 新 标准 ， 以 至 于 浏 
晚 器 对 HTML 5 的 兼容 性 被 用 于 区 分 是 否 能 够 被 称 为 现代 浏览 器 。 作 为 一 名 
Web 开发 者 ， 必 须 了 解 Web 开发 的 未 来 ， 学 习 使 用 HTML 5 的 新 功能 . 

本 章 向 读 才 外 纪 和 TIDME 5 的 基础 知识 通过 术 章 的 介绍 ， 读 者 不 仅 可 以 熟 
汪 本 PML 5 的 发 展 历史 和 优点 ， 还 可 以 掌握 HIML 5 的 基础 语法 ， 以 及 HIML 5 
中 新 增 的 与 项 单 Sa 标记 和 属性 有 关 的 内 容 。 


本 章 学 习 目标 : 

了 解 HIML 5 的 发 展 历史 
熟悉 HIML 5 的 未 来 发 展 趋势 
掌握 HIML 5 语法 的 改变 

了 解 浏览 器 内 核 和 常用 浏览 器 
掌握 浏览 器 的 得 分 测试 
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5.1 了 解 HTMLS 


HTML 5 是 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 稍 后 XHTML 1.0 标准 的 HIML 
标准 版 本 ， 目 前 ， 大 多 数 浏览 器 已 经 支持 某 些 HIML 5 技术 。HTML 5 有 两 大 特点 : 首 
先 ， 强 化 了 Web 网 页 的 表现 性 能 ， 其 次 ， 追 加 了 本 地 数据 库 等 Web 应 用 的 功能 。 

下 面 来 了 解 HTML 5 的 基本 知识 ， 包 括 它 的 发 展 历史 、 开 发 的 三 大 组 织 、 使 用 原因 以 
及 未 来 发 展 趋势 等 多 个 内 容 。 


E11 HTML 5 的 发 展 历史 


HTML 的 历史 可 以 追溯 到 很 久 以 前 ，1993 年 HTML 首次 以 因特网 的 形式 发 布 。20 世 
纪 90 年 代 的 人 见证 了 HTML 的 快速 发 展 ， 从 2.0 版 本 到 3.2 版 本 和 4.0 版 本 ， 再 到 1999 
年 的 4.01 版 本 ， 随 着 HTML 的 发 展 ，W3C 掌握 了 对 HTML 规范 的 控制 权 。 

然而 ， 在 快速 发 布 了 HTML 的 4 个 版 本 后 ， 业 界 普遍 认为 HTML 已 经 到 了 穷 途 末 
路 ， 对 Web 标准 的 焦点 也 开始 转移 到 了 XML 和 XHTML 上 ，HTML 被 放 在 了 次 要 位 置 。 
不 过 在 此 期 间 ，HTML 体现 了 硕 强 的 生命 力 ， 主 要 的 网 站 内 容 还 是 基于 HTML 的 。 为 了 能 
支持 新 的 Web 应 用 ， 同 时 克服 现 有 的 缺点 ，HTML 迫切 需要 添加 新 功能 ， 制 定 新 规范 。 

致力 于 将 Web 平台 提升 到 一 个 新 的 高 度 ， 一 小 组 人 在 2004 年 成 立 了 WHATWG 工作 
组 ， 他 们 创立 了 HTML 5 规范 ， 同 时 开始 专门 针对 Web 应 用 开发 新 功能 。Web 2.0 这 个 新 
词 正 是 在 那个 时 候 被 发 明 的 ，Web 2.0 开创 了 Web 的 第 二 个 时 代 ， 旧 的 静态 网 站 逐渐 让 位 
于 需要 更 多 特性 的 动态 网 站 和 社交 网 站 一 一 这 其 中 的 新 功能 真 的 是 数不胜数 。 

2006 年 ，W3C 又 重新 介入 HTML， 并 且 在 2008 年 1 月 22 日 发 布 了 HTML 5 的 工作 
草案 。2009 年 ，XHTML 2 工作 组 停止 工作 。 又 过 了 一 年 ，HTML 5 已 经 能 够 解决 非常 实 
际 的 问题 ， 因 此 ， 在 HTML 5 规范 还 未 定稿 的 情况 下 ， 各 大 浏览 器 厂商 就 开始 对 旗下 产品 
升级 以 支持 HIML 5 的 新 功能 。 这 样 ， 得 益 于 浏览 器 的 实验 性 反馈 ，HTML 5 规范 也 得 到 
了 持续 的 完善 ， 它 以 这 种 方式 迅速 地 融入 到 了 对 Web 平台 的 实质 性 改进 中 。 


6 开发 HTML 5 的 三 大 组 织 


HTML 5 草案 的 前 身 名 为 Web Applications 1.0， 它 需要 成 立 相 应 的 组 织 ， 并 且 肯 定 需 
要 有 人 来 负责 ， 这 正 是 下 面 3 个 组 织 的 工作 。 


1. WHATWG 组 织 


WHATWG 是 英文 Web Hypertext Application Technology Working Group 的 缩写 ， 中 文 
被 称 为 “网 页 超 文本 应 用 技术 工作 小 组 ”， 它 是 第 一 个 以 推动 网 络 HTML 5 标准 为 目的 而 
成 立 的 组 织 ， 在 2004 年 ， 由 Apple、Mozilla、Google 和 Opera 等 浏览 器 厂商 组 成 。 
WHATWG 开发 HTML 和 Web 应 用 API， 同 时 为 各 浏览 器 厂商 以 及 其 他 有 意向 的 组 织 提 
供 开 放 式 合 


2. W3C 组 织 


W3C 是 英文 World Wide Web Consortium 的 缩写 ， 中 文 被 称 为 “万 维 网 联盟 ”或 者 
“W3C 理事 会 ”。 

W3C 组 织 成 立 于 1994 年 10 月 ， 它 是 Web 技术 领域 最 具 权威 和 影响 力 的 国际 中 立 性 
技术 标准 机 构 。W3C 最 重要 的 工作 是 发 展 Web 规范 ， 这 些 规范 描述 了 Web 的 通信 协议 
(例如 HIML 和 XHTML) 和 其 他 的 构造 模块 。 

每 一 项 W3C 推荐 的 发 展 是 通过 由 会 员 和 受 邀 专家 组 成 的 工作 组 来 完成 的 ， 在 W3C 发 
布 某 个 新 标准 的 过 程 中 ， 规 范 是 通过 下 面 的 严格 程序 由 一 个 简单 的 理念 逐步 确立 为 推荐 标 
准 的 。 

(1) W3C 组 织 收 到 一 份 提交 内 容 。 

(2) 由 W3C 组 织 发 布 一 份 记录 。 

(3) 由 W3C 组 织 创建 一 个 工作 组 。 

(4) 由 W3C 组 织 发 布 一 份 工 作 草 案 。 

E 
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(5) 由 W3C 组 织 发 布 一 份 候选 的 推荐 。 
(6) 由 W3C 组 织 发 布 一 份 被 提议 的 推荐 。 
(7) 由 W3C 组 织 发 布 推荐 。 


3，JIETF 组 织 


IETF 是 英文 Intemet Engineering Task Force 的 缩写 ， 中 文 被 称 为 “因特网 工程 任务 
组 ”。 这 个 组 织 成 立 于 1985 年 底 ， 它 是 全 球 互 联网 最 具 权威 的 技术 标准 化 组 织 ， 主 要 任 
务 是 负责 互联 网 相关 技术 规范 的 研发 和 制定 ， 当 前 绝 大 多 数 国际 互联 网 技术 标准 出 自 
IETF。 


EM3 使 用 HTML 5 的 五 大 原因 


HTML 5 已 经 被 越 来 越 多 的 Web 开发 者 所 使 用 ， 它 也 越 来 越 红 ， 那 么 它 到 底 为 什么 这 
么 红 呢 ? 大 家 可 以 说 它 天 生 丽质 ， 当 然 它 也 离 不 开标 准 化 组 织 、 各 大 浏览 器 厂商 及 开发 者 
的 支持 和 追捧 。 下 面 分 别 从 五 大 方面 对 使 用 HIML 5 的 原因 进行 分 析 ， 它 们 分 别 是 技术 、 
标准 、 应 用 、 产 品 和 媒体 。 


1. 技术 : 天 生 丽 质 


不 得 不 说 ，HTML 5 天 生 丽 质 一 一 它 是 路 平台 的 ， 开 发 简单 ， 而 且 自 身 优 势 非常 明 
显 ， 说 明 如 下 : 

@ HTML 5 提高 了 可 用 性 ， 并 且 改 进 了 用 户 的 友好 体验 。 
增加 了 新 的 标记 ， 有 助 于 开发 者 定义 重要 的 内 容 。 
可 以 给 站 点 带 来 更 多 的 多 媒体 元 素 (例如 音频 和 视频 )。 
可 以 很 好 地 替代 Flash 和 Silverlight 技术 。 
当 涉 及 到 网 站 的 抓 取 和 索引 的 时 候 ， 对 于 SEO 很 友好 。 
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@ 将 被 大 量 应 用 于 移动 应 用 程序 和 游戏 。 
@ “可 移植 性 好 。 
2. 标准 : 天 下 统一 


实现 应 用 跨 平 台 和 技术 和 方案 很 多 ， 但 是 只 有 当 这 个 技术 成 为 国际 标准 ， 被 业界 广泛 
接受 和 使 用 时 才 会 显得 意义 非凡 ， 影 响 力 也 会 增 大 。W3C 领头 制定 HIML 5 国际 标准 ， 
原 计划 是 2017 年 发 布 ， 现 在 已 经 提前 到 2014 年 ， 目 前 已 经 进入 到 最 后 的 阶段 。 


3 产品: 各 显 神通 


产品 化 是 形成 新 产业 的 基础 ， 令 人 欣喜 的 是 多 家 公司 能 遵循 同一 个 标准 研发 各 种 产 
品 ， 推 进 新 的 产业 形成 。Google、 苹 果 、Mozilla 和 Opera 等 多 家 公司 都 在 产品 化 方面 做 了 
工作 。 由 于 Google 的 大 多 服务 都 是 基于 Web 的 ， 因 此 ，HTML 5 的 成 熟 和 广泛 使 用 ， 对 
它 绝 对 有 好 处 。 以 Google 为 例 ， 它 的 贡献 包括 以 下 儿 个 方面 : 

@ ”在 桌面 操作 系统 已 被 Windows、Mac OS 和 Linux 瓜分 的 情形 下 ，Google 推出 它 

的 Chrome 浏览 器 ， 其 目标 是 让 用 户 足 不 出 Chrome， 就 能 完成 各 种 需求 ， 让 
Windows 当 活 雷锋 。 

@ Google 基于 Chrome 浏览 器 基础 上 ， 推 出 了 WebOS 和 Chrome OS， 直 接 抢占 PC 

桌面 。 
@ ”Google 的 Android 浏览 器 是 对 HIML 5 支持 最 好 的 手机 浏览 器 之 一 。 由 于 HTML 
5 的 跨 平 台 、 跨 终端 的 特性 ， 相 信 它 对 Google 在 PC 桌面 方面 业务 部 署 也 是 重要 
的 协同 。 

@ ”Google 基于 Chrome 浏览 器 推出 了 Web 应 用 商店 ， 销 售 的 最 重要 的 一 种 应 用 就 是 
HTML 5 应 用 ， 其 Web 应 用 商店 网 址 是 https://chrome.google.com/webstore。 


4. 应 用 : 众人 拾 柴 


HTML 5 有 了 标准 和 浏览 器 环境 后 ， 最 重要 的 就 是 应 用 。 开 发 HTML 5 应 用 的 人 越 来 
越 多 ， 除 了 应 用 之 外 ，HIML 5 应 用 SDK 以 及 各 种 开发 工具 也 越 来 越 多 。 目 前 ， 读 者 所 熟 
知 的 Angrybird、 植 物 大 战 僵 尸 、 超 级 玛 利 亚 ， 甚 至 Quake 等 经 典 游戏 都 是 基于 HTML 5 
的 ， 而 且 微 博 和 电子 书 报 也 经 常会 使 用 到 HIML 5 技术 。 

HIML 5 的 功能 非常 强大 ， 它 可 以 和 CSS 结合 ， 制 作出 漂亮 的 页 面 ， 也 可 以 和 
JavaScript 结合 制作 游戏 。 例 如 ， 下 面 列 举 了 几 个 使 用 HIML 5 制作 的 游戏 应 用 ， 并 且 提 
供 了 这 些 游戏 的 网 址 。 

e@ ”植物 大 战 僵尸 :网 址 是 http://pvz.lonelystar.org/。 

@ ”超级 马里 奥 ， 网 址 是 http://www.htmlS5china.com/htmlSgames/mario/index.htm.。 

@ 愤怒 的 小 鸟 : http:/chrome.angrybirds.comy/。 

e@ ”在 线 练 毛笔 字 : http://www.theshodo.com/Write。 

上 面具 列 出 了 几 个 例子 ， 网 络 上 还 有 许多 其 他 的 例子 ， 这 里 不 再 一 一 列举 。 如 图 5-1 
所 示 呈 现 了 使 用 HTML 5 技术 实现 的 打 方块 游戏 。 
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图 5-1 HTML 5 实现 打 方 块 游戏 
5. 媒体 : 推波助澜 


HTML 5 之 所 以 这 么 火 ， 除 了 以 上 几 点 外 ， 当 然 也 离 不 开 各 类 媒体 的 推波助澜 ， 以 及 
各 类 开发 者 和 围观 者 的 参与 。 


614 HTML 5 的 未 来 发 展 趋势 


已 经 有 越 来 越 多 的 行业 巨头 在 向 HTML 5 示 好 。 除 苹果 、 微 软 和 黑莓 之 外 ， 谷 歌 的 
Youtube 已 部 分 使 用 HIML 5; Chrome 浏览 器 宣布 全 面 支持 HIML 5; Facebook 则 不 遗 余 
力 地 为 HIML 5 进行 着 “病毒 式 ” 传 播 。 可 以 说 ，HTML5 代表 了 移动 互联 网 发 展 的 趋 
势 ， 总 有 一 天 它 将 成 为 主流 技术 。 

HTML 5 从 根本 上 改变 了 开发 商 开发 Web 应 用 的 方式 ， 从 桌面 浏览 器 到 移动 应 用 ， 这 
种 语言 和 标准 都 正在 影响 并 将 继续 影响 着 各 种 操作 平台 

1 移动 优 先 


在 这 个 智能 手机 和 平板 电脑 普及 的 时 代 ， 移 动 优 先 已 经 成 为 发 展 趋势 ， 不 管 开 发 什 
么 ， 都 以 移动 为 主 。 许 多 游戏 开发 商 也 将 在 移动 Web 应 用 中 扮演 者 重要 角色 ， 移 动 Web 
应 用 优先 的 趋势 将 会 持续 ， 直 到 移动 设备 统治 信息 处 理 领 域 。 

2.， 游戏 开发 者 领衔 “主演 ” 

移动 游戏 开发 商 是 从 HIML 5 获 益 最 多 的 一 方 ， 他 们 可 利用 这 个 平台 逃脱 付费 游戏 须 
向 苹果 支付 的 30% 提 成 。 在 某 种 程度 上 ， ded 台 销 量 最 好 的 应 用 ， 也 是 吸引 人 
们 购买 移动 设备 的 一 个 重要 因素 。 

许多 游戏 开发 商都 被 Facebook 或 者 Zynga 推动 着 发 展 ， 而 未 来 的 Facebook 应 用 生态 
系统 是 基于 HTML 5 的 ， 尽 管 在 HTML 5 平台 开发 出 游戏 非常 困难 ， 但 游戏 开发 商 却 都 愿 
意 那么 做 。 
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3.， 自动 变 化 的 屏幕 尺寸 


在 HIML 5 真正 改变 移动 开发 平台 之 前 ， 必 须 迈 出 重要 的 一 步 ， 那 就 是 “响应 式 设 
计 ”， 即 屏幕 可 以 根据 内 容 而 自动 调整 大 小 。 

要 做 好 响应 式 设计 ， 就 必须 要 知道 内 容 与 屏幕 之 间 的 反馈 关系 。 响 应 式 最 好 的 一 个 例 
子 就 是 BostonGlobe.com( 观 看 视频 )， 其 屏幕 能 够 根据 任何 内 容 而 调整 尺寸 大 小 。 

4. 设备 访问 

对 于 许多 移动 开发 商 来 说 ， 提 高 设备 访问 能 力 是 HIML 5 最 令 人 激动 的 革新 ， 这 意味 
着 Web 应 用 能 够 登录 移动 设备 而 无 需 做 任何 PhoneGap 式 打包 。 这 就 开启 了 另 一 个 可 能 的 
世界 ， 例 如 能 与 云 更 好 地 整合 并 提高 游戏 可 玩 性 ， 有 了 HTML 5 这 个 平台 ， 开 发 商 可 以 不 
再 依赖 于 Java 语言 和 CSS 3 及 其 他 程序 语言 。 

5， 离 线 缓存 

离线 缓存 是 一 个 十 分 新 潮 的 一 个 概念 ， 在 离线 状态 下 ， 应 用 也 能 够 照常 动作 ， 这 是 
HITML 5 充满 魔力 的 一 面 。 例 如 ， 亚 马 逊 Kindle 的 云 阅读 器 ， 可 以 通过 Firefox 6 以 上 版 
本 、Chrome 11 以 上 版 本 、Safari 5 以 上 版 本 及 iOS 4 以 上 版 本 的 浏览 器 将 内 容 同步 到 所 有 
Kindle 系列 设备 ， 并 能 记忆 用 户 在 Kindle 图 书馆 的 一 切 。 

6， 开 发 工具 的 成 熟 


在 开发 工具 方面 ， 除 了 AppMobi 提供 的 工具 以 外 ， 还 有 Sencha 和 Appcelerator 提供 
的 框架 及 IDE 供应 用 开发 商 使 用 。 虽 然 这 些 工具 都 不 是 特别 成 熟 ， 也 不 如 Android 和 ISO 
上 的 开发 商 框架 及 工作 那样 强大 ， 但 是 它们 在 不 断 改 进 ， 将 会 变 得 越 来 越 好 用 。 


5.2 HTML 5 的 语法 


HTML 5 是 HTML 标准 的 下 一 个 版 本 ， 越 来 越 多 的 开发 者 开始 使 用 HTML 5 构建 网 
站 。 如 果 同 时 使 用 HIML 4 和 HTML 5 的 话 ， 可 以 发 现 ， 从 头 构建 HTML 5 要 比 HIML 4 
迁移 到 HTML 5 方便 得 多 。 

下 面 分 别 从 文档 媒体 类 型 、 编 码 类 型 和 DOCTYPE 声明 等 方面 介绍 HTML 5 的 语法 。 


€21 文档 媒体 类 型 


HTML 5 定义 的 HTML 语法 大 部 分 都 兼容 HIML 4 和 XHTML 1， 但 是 也 有 一 部 分 不 
兼容 。 大 多 数 HTML 文档 都 是 保存 成 text/html 媒体 类 型 。HTML 5 为 HTML 语法 定义 了 
详细 的 解析 规则 (包括 错误 处 理 )， 用 户 必须 遵守 这 些 规则 将 它 保存 成 texbhtml 媒体 类 型 。 

【 例 5.1】 
下 面 的 代码 是 一 个 符合 HTML 5 语法 规范 的 例子 : 


<!doctype html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Example document</title> 
</head> 
<body> 
<p>Example paragraph</p> 
</body> 
</html> 
HTML 5 为 HTML 语法 定义 了 一 个 text/html 沙 箱 媒 体 类 型 ， 以 便 可 以 管理 不 信任 的 内 
容 。 其 他 能 够 用 于 HIML 5 的 语法 是 XML， 它 兼 容 XHTML 1， 使 用 XML 语法 的 话 需 要 
将 文档 保存 成 XML 媒体 类 型 ， 并 且 根 据 XML 的 规范 需要 设置 命名 空间 ， 该 命名 空间 是 
http:/www-.w3.org/1999/xhtml。 
【 例 5.2】 
下 面 的 代码 符合 HTML 5 中 的 XML 语法 规范 ， 需 要 注意 的 是 ，XML 文档 必须 保存 成 
XML 媒体 类 型 的 ， 例 如 application/xhtml+xml 或 者 application/xml。 代 码 如 下 : 
<?xml version="1.0" encoding="UTF-8"?> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<title>Example document</title> 
</head> 
<body> 
<p>Example paragraph</p> 
</body> 
</html> 


5.2.2 ”编码 类 型 


HTML 5 的 HTML 语法 中 ， 有 3 种 形式 可 以 声明 字符 串 的 编码 (encoding) 类 型 ， 说 明 
如 下 : 

在 传输 级 别 上 ， 在 HTTP 实例 的 header 里 设置 Content-Type 属性 。 
在 文件 的 开头 设置 一 个 Unicode 的 Byte Order Mark(BOM)， 该 字符 文件 的 
encoding 方式 提供 了 一 个 签名 。 

@ 在 文档 的 前 1024 个 字 节 之 前 的 内 容 里 ， 使 用 带 有 charset 属性 的 meta 元 素来 声明 
encoding 方式 。 

例如 ， 下 面 的 代码 声明 HTML 文档 是 UTF-8 格式 的 : 

<meta charset="UTF-8"> 

上 述 代 码 非 常 简 单 ， 它 替换 了 原来 的 HTML 4 中 繁琐 的 meta 元 素 的 以 下 声明 : 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 


虽然 HTML 5 兼容 了 HIML 4 中 的 meta 元 素 的 语法 ， 但 是 在 HIML 5 中 并 不 推荐 使 
用 。 另外， 对 于 HTML 5 中 的 XML 语法 ， 依 然 与 以 前 的 XML 语法 声明 是 一 样 的 。 
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5.2.3 DOCTYPE 声 明 


HTML 5 的 HTML 语法 要 求 文档 必须 声明 DOCTYPE 以 确保 浏览 器 可 以 在 标准 模式 下 
展示 页 面 ， 这 个 DOCTYPE 没有 其 他 的 目的 ， 并 且 在 XML 中 是 可 选项 ， 这 是 因为 XML 
媒体 格式 的 文档 一 直 就 是 在 标准 模式 下 处 理 的 。 

在 HTML 早期 版 本 声明 时 ，HTML 是 建立 在 SGML 基础 上 的 ， 因 此 通过 DOCTYPE 
声明 时 需要 关联 引用 一 个 相对 应 的 DTD。 

HTML 4 版 本 的 DOCTYPE 声明 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

HTML 5 与 先前 的 版 本 不 一 样 ， 它 仅仅 需要 声明 DOCTYPE 就 可 以 告诉 文档 启用 的 是 
HTML 5 语法 标准 ， 浏 览 器 会 为 其 做 剩余 工作 。 

HTML 5 中 DOCTYPE 的 声明 代码 如 下 : 


<!DOCTYPE html> 


5.2.4 其 他 内 容 


HTML 5 的 HTML 语法 允许 在 文档 中 使 用 MathML( 数 学 标记 语言 ) 和 svg( 可 伸缩 矢量 
图 ) 元 素 。 

例如 ， 一 个 非常 简单 的 HTML 页 面包 含 一 个 svg 元 素面 出 的 圆 。 代 码 如 下 : 

<!DOCTYPE html> 

<title>SVG in text/html</title> 

<p>A green circle:<svg> <circle r="50" cx="50" cy="50" fill="green"/> 

</svg></p> 

除了 上 述 内 容 外 ，HTML 5 还 支持 更 多 复杂 的 组 合 标记 ， 例 如 svg 的 foreignObject 元 
素 ， 开 发 者 可 以 棋 套 MathML、HTML 或 者 自身 嵌 套 。 另 外 ，HTML 5 已 经 原生 支持 IRI 
(Internationalized Resource Identifiers， 国 际 化 资源 标识 符 ) 了 ， 尽 管 这 些 IRI 只 能 在 UTF-8 
或 者 UTF-16 编码 的 文档 中 使 用 。 


5.3 HTML 5 表单 


虽然 HTML 5 还 没有 完全 苏 窗 HTML 4， 它 们 仍然 有 许多 相似 之 处 ， 但 是 它们 也 存在 
着 关键 的 不 同 ， 表 单 就 是 其 中 之 一 。 本 节 简 单 了 解 HTML 5 中 的 表单 ， 包 括 输入 类 型 、 表 
单元 素 和 表单 属性 等 多 个 内 容 。 


> 4。 (6.3.1 HTML 5 输入 类 型 
使 用 input 元 素 可 以 创建 很 多 输入 类 型 的 控件 (例如 输入 框 、 密 码 框 、 复 选 框 、 单 选 按 


钮 以 及 提交 按钮 等 )，HTML 5 中 新 增 了 多 个 表单 输入 类 型 ， 这 些 新 的 输入 类 型 提供 了 更 好 
的 输入 控件 和 数据 验证 。 
例如 ， 表 5-1 列 出 HTML 5 新 增加 的 表单 类 型 ， 且 对 这 些 表单 类 型 进行 了 简单 说 明 。 


表 5-1 HTML 5 中 新 增 的 表单 类 型 


类 型 名 称 说 明 
email 用 于 应 该 包含 E-mail 地 址 的 输入 框 
ul 用 于 应 该 包含 URL 地 址 的 输入 框 
number 用 于 应 该 包含 数值 的 输入 框 
range 用 于 应 该 包含 一 定 范围 内 数值 的 输入 框 
date 选取 日 、 月 、 年 
month 选取 月 、 年 
Week 选取 周 和 年 
time 选取 时 间 ( 小 时 和 分 钟 ) 
datetime 选取 时 间 、 日 、 月 、 年 (UTC 时 间 ) 
datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 
search 用 于 搜索 域 ， 比 如 站 点 搜索 或 Google 搜索 
color 用 于 实现 一 个 RGB 颜色 输入 
tel 从 语义 上 实现 一 个 电话 号 码 的 输入 ， 常 常 与 pattern 属性 结合 使 用 


在 5-1 表 中 ，date、month、week、time、datetime 和 datetime-local 都 属于 日 期 选择 
器 ， 用 于 验证 输入 的 日 期 。 
表 5-1 中 的 输入 类 型 的 使 用 起 来 很 简单 ， 直 接 将 <input> 标 记 的 type 属性 设置 为 以 上 类 
型 即 可 。 
【 例 5.3】 
下 面 的 代码 指定 了 <input> 标 记 的 不 同 的 type 属性 值 : 
<form method="post" action="#"> 
电子 邮箱 : <input type="email" /> 
个 人 网 页 : <input type="url" /> 


幸运 颜色 : <input type="color" /><br/><br/> 
<center><input type="submit" value=" 提 交 " /></center> 


</form> 

从 上 述 代 码 中 可 以 看 出 ， 分 别 向 HTML 网 页 中 添加 了 3 个 <input> 标 记 ， 并 且 将 type 
属性 的 值 指定 为 email、url 和 color。 
在 浏览 器 中 运行 上 述 代 码 ， 查 看 效果 。 
如 图 5-2 所 示 为 在 Chrome 浏览 器 中 的 效果 。 从 图 中 可 以 看 出 ，color 类 型 的 <input> 标 
记 向 用 户 提 供 了 一 系列 的 颜色 选择 ， 用 户 单 击 颜色 即 可 以 选择 。 
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5-2 HTML 5 新 增 的 输入 类 型 


选择 用 户 类 型 完毕 后 ， 可 以 向 电子 邮箱 和 个 人 网 页 的 输入 框 中 输入 内 容 ， 然 后 单 击 
“提交 ”按钮 ， 此 时 的 效果 如 图 5-3 所 示 。 


) HTML 5 新 并 的 表单 深 和 x 昨 
© DD file///D:/htmlS/chap5/three.html 家 | 三 | 


电子 邮箱 : [held 个 人 网 页 abe 幸运 颜色 ， 国有 


回 请 在 电子 邮件 地 址 中 包 
括 “@”。 “hello” 中 缺 


5-3 例 5.3 的 运行 效果 


5.3.2 HTML 5 表单 元 素 


在 HTML 5 中 新 增 了 一 系列 的 元 素 ， 其 中 包括 与 表单 相关 的 3 个 元 素 ， 它 们 分 别 是 
datalist 元 素 、keygen 元 素 和 output 元 素 。 

@ ”datalist: 该 元 素 指定 输入 框 的 选项 列表 ， 列 表 通 过 datalist 内 的 option 元 素 创建 。 

@ ”keygen: 该 元 素 是 密 钥 生成 器 ， 其 作用 是 提供 一 种 验证 用 户 的 可 靠 方 法 。 

@ ”output: 该 元 素 用 于 不 同类 型 的 输出 ， 例 如 计算 或 者 脚本 输出 。 


5.3.3 HTML 5 表单 属性 
在 HTML 5 中 新 增 了 一 系列 与 表单 相关 的 属性 ， 下 面 通过 两 个 方面 简单 了 解 一 下 。 


新 的 form 属 性 


HTML 5 中 新 增 了 两 个 与 form 有 关 的 属性 ， 这 两 个 属性 分 别 是 autocomplete 属性 和 
novalidate 属性 。 


| 


autocomplete: 该 属性 指定 所 有 的 表单 控件 是 否 应 该 拥有 自动 完成 功能 。 如 果 将 属 
性 值 设置 为 on， 表 示 执 行 自动 完成 功能 ;如 果 将 属性 值 设置 为 off， 则 表示 关闭 
自动 完成 功能 。 

novalidate: 该 属性 指定 在 提交 表单 时 不 对 表单 进行 有 效 性 检查 。 

新 的 input 属 性 


除了 为 form 元 素 增加 属性 外 ， 还 为 input 元 素 增 加 了 一 系列 的 属性 ， 这 些 属 性 及 其 说 
明 如 表 5-2 所 示 。 


表 5-2 HTML 5 中 新 增 的 input 属性 


属性 名 称 说 阴 
autocomplete 指定 input 输入 框 是 否 拥 有 自动 完成 功能 。 适 用 于 text、search、url、tel、 
email、password、datepickers、range 以 及 color 类 型 的 <input> 标 记 
autofocus 指定 页 面 加 载 后 是 否 自动 获取 焦点 。 适 用 于 <input> 标 记 的 所 有 类 型 
form 指定 输入 框 所属 的 一 个 或 多 个 表单 。 适 用 于 <input> 标 记 的 所 有 类 型 


formoverrides 允许 重 写 form 元 素 的 某 些 属 性 ， 适 用 于 <input> 标 记 的 submit 和 image 类 型 ， 


HTML 5 表单 重 写 属性 说 明 如 下 所 示 。 

。 formaction: 重 写 表单 的 action 属性 。 

。 formenctype: 重 写 表单 的 enctype 属性 。 

。 formmethod: 重 写 表单 的 method 属性 。 

。 formnovalidate: 重 写 表 单 的 novalidate 属性 。 
。 formtarget: 重 写 表单 的 target 属性 


width 和 height 指定 用 于 image 类 型 的 <input> 标 记 的 图 像 的 宽度 和 高 度 


list 


指定 输入 框 的 datalist 元 素 的 id 值 。 适 用 于 类 型 是 text、search、url、tel、 
email、datapickers、number、range 以 及 color 类 型 的 <input> 标 记 


min、max 和 step ”| 用 于 为 包含 数字 或 日 期 的 input 类 型 指定 限定 约束 ， 其 中 max 指定 允许 的 最 大 


值 ，min 指定 允许 的 最 小 值 ; step 指定 合法 的 数字 间隔 。 适 用 于 类 型 是 
datapickers、number 和 range 的 <input> 标 记 


multiple 指定 输入 框 中 可 以 选择 多 个 值 。 适 用 于 类 型 是 email 和 file 的 <input> 标 记 


pattern 


用 于 验证 input 框 的 模式 ， 模 式 是 正则 表达 式 。 适 用 于 类 型 是 text、search、 
Url、tel、email、 和 password 的 <input> 标 记 


placeholder 提供 一 种 提示 ， 描 述 输入 框 所 期 待 的 值 。 适 用 于 类 型 是 text、search、url、tel、 
email 以 及 password 的 <input> 标 记 
Tiequired 指定 必须 在 提交 之 前 填写 输入 框 
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5.4 HTML 5 的 元 素 


与 HTML 4 相 比 ，HTML 5 的 功能 有 了 很 大 的 改进 ， 元 素 就 是 其 中 之 一 ， 下 面 分 别 从 
新 增 的 元 素 、 更 改 的 元 素 和 废除 的 元 素 三 个 方面 进行 介绍 。 


E41 新 增 的 元 素 


HTML 5 中 新 增 了 许多 元 素 ， 除 了 5.3.2 节 介 绍 的 新 增 的 表单 元 素 外 ， 表 5-3 对 其 他 的 
新 增 元 素 进 行 了 说 明 。 


表 5-3 HTML 5 中 的 新 增 元 素 


元 素 名 称 说 明 
article 定义 独立 于 文档 的 内 容 
aside 定义 页 面 内 容 之 外 的 内 容 
audio 定义 音频 
bdi 定义 文本 的 方向 ， 使 其 脱离 其 周围 文本 的 方向 设置 
canvas 绘制 图 形 
command 定义 命令 按钮 
datalist 定义 下 拉 列 表 
details 定义 元 素 的 细节 
embed 定义 外 部 交互 内 容 或 插件 
figure 定义 媒介 内 容 的 分 组 ， 以 及 它们 的 标题 
figcaption 定义 figure 元 素 的 标题 
footer 定义 section 或 者 page 的 页 脚 
header 定义 section 或 者 page 的 页 眉 
hgroup 定义 有 关 文 档 中 块 的 信息 
mark 定义 有 记号 的 文本 
meter 定义 预定 义 范围 内 的 度量 
nav 定义 导航 链接 
progress 定义 任何 类 型 的 任务 的 进度 
Tm 定义 如 果 浏 览 器 不 支持 mby 元 素 显示 的 内 容 
rt 定义 ruby 注释 的 解释 
rub 定义 mby 注释 
section 定义 文档 中 的 节 (section、 区 段 )。 例 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 
source 定义 媒介 源 
summa 定义 details 元 素 的 标题 


续 表 
元 素 名 称 说 明 

time 定义 日 期 和 时 间 

track 定义 用 在 媒体 播放 器 中 的 文本 轨道 

video 定义 视频 

5.4.2 更改 元素 


HTML 5 中 对 HTML 4 已 经 存在 的 元 素 进行 了 更 改 ， 例 如 对 某 个 元 素 添加 了 新 的 属 
性 ， 或 者 废除 了 某 个 属性 ， 下 面 介绍 HTML 5 中 更 改 的 一 些 常用 元 素 。 


1，html 元 素 


html 元 素 是 整个 HTML 文档 的 根 元 素 ， 在 HIML 4 中 的 xmlns 属性 ， 在 XHTML 中 
是 必需 的 。 实 际 上 ，xmlns 属性 没有 任何 效果 ， 但 是 由 于 验证 的 原因 ， 在 把 HTML 转换 为 
XHTML 的 过 程 中 ， 是 很 有 帮助 的 。 在 HTML 5 中 ， 可 以 不 再 指定 xmlns 属性 ， 该 属性 是 
可 选 的 。 另 外 ，HTML 5 中 为 html 元 素 定 义 了 一 个 manifest 属性 ， 该 属性 定义 一 个 URL， 
在 这 个 URL 中 描述 了 文档 的 缓存 信息 。 


上 ss 证 和 有 由 于 半 玫 夺 因 着 定义 smlns 属性， 那么 ， 该 必 疆 的 叭 一 合法 值 是 
http:Wwww.w3.org/1999/xhtml。 

2.，a 元 素 

在 HIML 4 中 ，a 元 素 既 可 以 是 超 链接 ， 也 可 以 是 锚 ， 这 取决 于 是 否 描述 了 href 属 
性 。 在 HIML 5 中 ，a 元 素 是 超 链 接 ， 如 果 没有 href 属性 ， 它 仅仅 是 超 链接 的 一 个 占 位 
符 。HTML 5 中 不 再 支持 <a> 标 记 的 charset、coords、name、rev 和 shape 属性 ， 新 增 了 
type 属性 和 media 属性 ，type 属性 指定 目标 URL 的 MIME 类 型 ， 仅 在 href 属性 存在 时 使 
用 ; media 属性 指定 目标 URL 的 媒介 类 型 ， 默 认 值 是 l， 仅 在 href 属性 存在 时 使 用 。 

3，body 元 素 
在 HIML 5 中 ， 删 除了 所 有 body 元 素 的 特殊 属性 ， 这 些 属性 是 不 被 赞成 使 用 的 。 


4.，form 元 素 


在 HTML 5 中 ，form 元 素 不 再 支持 HTML 4 中 的 accept 属性 ， 新 增加 了 autocomplete 
和 novalidate 属性 。 


5 ol 元 素 


对 于 ol 元 素 ，HTML 4 中 不 赞成 使 用 start 和 type 属性 ， 但 是 在 HTML 5 中 支持 ， 同 
时 新 增加 了 reversed 属性 。 
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6. Ul 元 素 

在 HIML 4 中 ,，U 元 素 的 compact 和 type 属性 不 被 赞成 使 用 ， 在 HTML 5 中 ， 不 再 支 
持 这 两 个 属性 。 

7. table 元 素 

HTML 5 中 只 支持 <table> 标 记 的 border 属性 ， 并 且 只 允许 使 用 值 为 空 或 者 1， 不 再 支 
持 其 他 的 属性 。 

8. style 元 素 

scoped 属性 是 HTML 5 中 的 新 属性 ， 它 允许 开发 者 为 文档 的 指定 部 分 定义 样式 ， 而 不 
是 整个 文档 。 如 果 使 用 scoped 属性 ， 那 么 所 指定 的 样式 只 能 应 用 到 style 元 素 的 父 元 素 及 
其 子 元 素 中 。 

9.，script 元 素 

在 HIML 5 中 ，<scrip 亿 标记 的 type 属性 是 必需 的 ， 但 是 该 属性 在 HIML 5 中 是 可 选 
的 。 同 时 ，HTML 5 中 新 增加 了 一 个 async 属性 ， 该 属性 指定 异步 执行 脚本 ( 仅 适 用 于 外 部 
脚本 )。 

10. input 元 素 

在 HIML 4 中 ，align 属性 已 经 被 废弃 ，HTML 5 不 再 支持 该 属性 ， 如 果 要 设置 对 齐 样 
式 ， 那 么 需要 在 CSS 中 进行 设置 。HTML 5 对 <input> 标 记 的 type 属性 添加 了 多 个 属性 
值 ， 这 些 属性 值 及 其 说 明 可 以 参考 表 5-2。 


贱 注意 ; 除了 上 面 介绍 的 10 个 元 素 外 ，HTML 5 中 还 对 其 他 的 一 些 元 素 进行 了 或 多 
或 少 的 改进 ， 但 是 其 他 的 元 素 并 不 经 常 被 用 到 ， 因 此 这 里 不 再 详细 进行 解释 和 说 明 。 
5.4.3 废除 的 元 素 


HIML 5 在 增加 或 者 修改 元 素 的 同时 ， 也 对 HTML 4 中 的 一 些 元 素 进 行 了 删除 。 例 
如 ， 表 5-4 中 列 出 了 HTML 5 中 废除 的 元 素 ， 这 些 元 素 在 HIML 5 中 不 再 提供 支持 。 


表 5-4 HTML 5 中 的 废除 元 素 


元 素 名 称 说 明 
acronym 定义 首 字母 缩写 
applet 定义 嵌入 的 applet。 可 以 使 用 object 来 代替 
basefont 定义 文档 中 所 有 文本 的 默认 颜色 、 大 小 和 字体 。 可 以 使 用 CSS 样式 代替 
big 定义 大 号 文本 
center 定义 居中 的 文本 


NN 


[2 
E 
续 表 yy 
早 
元 素 名 称 说 明 认 
dir 定义 目录 列表 辜 
定义 文本 的 字段 、 颜 色 和 大 小 。 可 以 使 用 CSS 样式 代替 EE 
frame 定义 子 窗口 (框架 ) i 
frameset 定义 框架 集 
isindex 定义 单行 的 输入 框 
noframes 向 浏览 器 显示 无 法 处 理 框架 的 提示 文本 
s 和 strike 定义 加 删除 线 的 文本 
tt 定义 打字 机 文本 
u 定义 下 划 线 文本 
Xm 定义 预 格式 文本 


5.5 HTML 5 的 属性 


HTML 5 在 对 元 素 增加 、 废 除 和 改进 的 同时 ， 也 对 属性 进行 了 操作 。 在 5.3.3 节 已 经 介 
绍 了 HTML 5 中 新 增 的 表单 属性 ， 除 了 这 些 属性 外 ，HTML 5 中 还 增加 了 其 他 的 属性 ， 下 
面 从 标准 属性 和 事件 属性 两 方面 进行 说 明 。 
(5.5.1 标准 属性 
标准 属性 是 指 HTML 中 的 元 素 都 支持 的 属性 ， 只 有 极 少数 的 元 素 是 个 例外 。 例 如 ， 在 
表 5-5 中 列 出 了 HTML 5 中 新 增 的 元 素 的 标准 属性 ， 并 且 对 这 些 属性 进行 了 简单 说 明 。 
表 5-5 HTML 5 中 新 增 的 标准 属性 


属性 名 称 说 阴 
contenteditable 背 定 是 否 允 许 用 户 编辑 内 容 
contextmenu 此 定 元 素 的 上 下 文 菜单 


创建 者 定义 的 属性 ，HIML 文档 的 创作 者 可 以 定义 他 们 自己 的 属性 。 定 义 属性 


data-yourvalue 


时 必须 以 data- 开 头 
draggable 此 定 是 否 允许 用 户 拖 动 元 素 
hidden 此 定 元 素 是 无 关 的 ， 被 隐藏 的 元 素 不 会 显示 
item 用 于 组 合 元 素 
spellcheck 指定 是 否 必须 对 元 素 进行 拼写 或 者 语法 检查 
subject 指定 元 素 对 应 的 项 目 
上 面 表 5-5 列举 的 属性 中 ， 并 不 是 每 一 个 属性 都 会 被 使 用 到 ， 有 些 属性 并 不 常用 。 下 


面 通过 一 个 示例 演示 contenteditable 属性 的 使 用 。 
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【 例 5.4】 

contenteditable 属性 指定 是 否 人 允许 用 户 编辑 内 容 ， 它 几乎 适用 于 所 有 的 元 素 。 下 面 通 过 
<pre> 标 记 显示 一 些 个 人 资料 ， 并 且 为 该 标记 指定 contenteditable 属性 。HTML 页 面 的 相关 
代码 如 下 : 

个 人 资料 信息 : 


<pre id="personinfo" contenteditable> 
我 叫 李 想 容 ， 今 年 24， 幸 运 数 字 是 8。 
职业 : 淘宝 客服 
爱好 : 购物 、 唱 歌 、 跳 舞 和 画 画 
最 喜欢 的 歌曲 :抒情 、 充 满 正 能 量 的 歌曲 
最 喜欢 的 电视 剧 :喜欢 古装 剧 
别人 对 我 的 评价 : 


</pre> 
在 浏览 器 中 运行 上 述 代 码 查 看 效果 ， 初 始 效果 如 图 5-4 所 示 。 


蕊 加 | 
Conterednsbie 


© D filey//D/htmls/chapS/three.html 王 

个 人 资料 信息 ， 
基 抽 字 想 百 ， 分 年 24， 字 计数 他 是 8， 

取 北 : 入 主 雁 原 

要 是: 的 物 、 碟 各 、 拓 外 和 国 而 

最 商家 的 政 曲 ， 条 傅 、 友 削 正 匡 鲁 的 黎 昌 

全 而 对 的 电视 剧 : 面相 十 多 关 
别人 对 次 的 评价 + 


5-4 例 5.4 的 初始 效果 
从 例 5.4 的 代码 中 可 以 看 出 ， 为 <pre> 标 记 添 加 了 contenteditable 属性 ， 它 表示 pre 元 


素 中 的 内 容 可 以 编辑 。 将 鼠标 移动 到 pre 元 素 所 在 处 并 单 击 ， 此 时 的 区 域 是 可 编辑 的 ， 可 
以 向 编辑 区 域 添加 或 修改 内 容 ， 如 图 5-5 所 示 。 


ET 
GD fle///D/htmis/chapS/three html 
个 人 资料 信息 ， 
两 可 可 起 奉 ;地 证 其 ， 二 让 灯 字 昌 和 
轨 业 : 洒 实 如 时 
委 秤 内 伯 、 堪 将 、 并 生 和 本 本 
二 机 交 的 到 全 : 他 人 情 、 充 其 三才 和 的 侈 全 
而 交 的 电视 测 ; 间 欢 二 开 


是 
a 有 的 人 说 找 乐观 、 开 并 ， 有 的 人 诬 我 乐于 助人 ， 有 的 人 说 和 是 一 个 值得 至 六 的 朋友 ， 还 有 的 人 说 技术 过 伸 


5-5 ”编辑 区 域内 容 


C52 事件 属性 


HTML 4 增加 了 通过 事件 触发 浏览 器 中 行为 的 能 力 ， 例 如 ， 当 用 户 点 击 某 个 元 素 时 ， 
启动 一 段 JavaScript 脚本 。HTML 5 中 增加 了 新 的 事件 属性 ， 下 面 对 Window 事件 属性 、 
表单 事件 属性 、 键 盘 事 件 属 性 、 鼠 标 事 件 属 性 和 媒介 事件 属性 分 别 进行 说 明 。 


1. Window 事 件 属性 
Window 事件 是 指 Window 对 象 触 发 的 事件 。Window 事件 属性 适用 于 body 元 素 ， 例 


N 


人 
如 onload。HTML 5 中 为 body 元 素 增 加 了 多 个 Window 事件 属性 ， 这 些 事件 属性 及 其 说 明 a 
如 表 5-6 所 示 。 
表 5-6 HTML 5 中 新 增 的 Window 事件 属性 < 
Window 事件 属性 说 明 
set 在 打印 文档 之 后 运行 脚本 a 
onbeforeprint 在 文档 打印 之 前 运行 脚本 
onbeforeonload 在 文档 加 载 之 前 运行 脚本 
onerror 当 错 误 发 生 时 运行 脚本 
onhaschange 当 文 档 改 变 时 运行 脚本 
onmessage 当 触 发 消息 时 运行 脚本 
onoffline 当 文档 离线 时 运行 脚本 
ononline 当 文 档 上 线 时 运行 脚本 
onpagehide 当 窗口 隐藏 时 运行 脚本 
onpageshow 当 窗 口 可 见 时 运行 脚本 
onpopstate 当 窗 口 历史 记录 改变 时 运行 脚本 
onredo 当 文 档 执行 再 执行 操作 (redo) 时 运行 脚本 
onresize 当 调 整 窗口 大 小 时 运行 脚本 
onstorage 当 文 档 加 载 时 运行 脚本 
onundo 当 Web Storage 区 域 更 新 时 (存储 空间 中 的 数据 发 生变 化 时 ) 运 行 脚本 
onunload 当 用 户 离 开 文档 时 运行 脚本 


2.， 表单 事件 属性 

表单 事件 是 由 HTML 表单 内 部 的 动作 触发 的 事件 ， 例 如 onblur、onchange、onfocus 
和 onsubmit 等 都 属于 表单 事件 属性 ， 这 些 表 单 事件 属性 适用 于 所 有 的 HTML 5 元 素 ， 但 是 
这 些 事件 属性 最 常用 于 表单 元 素 中 。HTML 5 中 不 再 支持 onreset 事件 属性 。 表 5-7 列 出 了 
HTML 5 中 新 增 的 表单 事件 属性 。 


表 5-7 HTML 5 中 新 增 的 表单 事件 属性 


表单 事件 属性 说 阴 
oncontextmenu 当 触 发 上 下 文 菜单 时 运行 脚本 
onformchange 当 表 单 改变 时 运行 脚本 
onforminput 当 表 单 获得 用 户 输入 时 运行 脚本 
oninput 当 元 素 获得 用 户 输入 时 运行 脚本 
oninvalid 当 元 素 无 效 时 运行 脚本 


3. 键盘 事件 属性 
键盘 事件 是 由 键盘 触发 的 事件 ，onkeydown、onkeypress 和 onkeyup 都 是 键盘 事件 属 
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4. 鼠标 事件 属性 


鼠标 事件 是 指 上 


日 鼠标 或 相似 的 
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于 所 有 的 HIML 5 元 素 。 在 HIML 5 中 ， 并 没有 增加 新 的 键盘 事件 属性 ， 因 此 这 


和 户 动 作 触发 的 事件 ， 例 如 onclick 、ondbclick 和 


onmousedown 等 都 属于 鼠标 事件 属性 ， 这 些 属 性 适用 于 所 有 的 HIML 5 元素。 在 HIML 5 
中 ， 新 增加 了 9 个 鼠标 事件 属性 ， 这 些 属 性 及 其 说 明 如 表 5-8 所 示 。 


鼠标 事件 属性 
ondrag 
ondragend 
ondragenter 
ondragleave 
ondragover 
ondragstart 
ondrop 
onmousewheel 


onscrol] 


5.， 媒介 事件 属性 


表 5-8 HTML 5 中 新 增 的 鼠标 事件 属性 


说 明 
当 拖 动 元 素 时 运行 脚本 
当 拖 动 操作 结束 时 运行 脚本 
当 元 素 被 拖 动 至 有 效 的 拖 放 目标 时 运行 脚本 
当 元 素 离开 有 效 拖 放 目标 时 运行 脚本 
当 元 素 被 拖 动 至 有 效 拖 放 目标 上 方 时 运行 脚本 
当 拖 动 操作 开始 时 运行 脚本 
当 被 拖 动 元 素 正在 被 拖 放 时 运行 脚本 
当 转 动 鼠标 滚轮 时 运行 脚本 
当 滚 动 滚动 元 素 的 滚动 条 时 运行 脚本 


媒介 事件 是 由 视频 、 图 像 以 及 音频 等 媒介 元 素 触 发 的 事件 。 媒 介 事 件 属性 适用 于 所 有 
HTML 5 元 素 ， 但 是 在 媒介 元 素 (例如 audio 元 素 和 video 元 素 ) 中 最 为 常用 。HTML 5 中 增 
加 了 多 个 媒介 事件 属性 ， 如 表 5-9 所 示 。 


表 5-9 HTML 5 中 新 增 的 媒介 事件 属性 


媒介 事件 属性 说 明 
oncanplay 当 媒 介 能 够 开始 播放 但 可 能 因 缓 冲 而 需要 停止 时 运行 脚本 
oncanpla 当 媒 介 能 够 无 需 因 缓冲 而 停止 即 可 播放 至 结尾 时 运行 脚本 
ondurationchange 当 媒 介 长 度 改变 时 运行 脚本 
onemptied 当 媒 介 资 源 元 素 突然 为 空 时 (网 络 错误 、 加 载 错误 等 ) 运 行 脚 本 
onended 当 媒 介 已 抵达 结尾 时 运行 脚本 
Onerror 当 在 元 素 加 载 期 间 发 生 错 误 时 运行 脚本 
onloadeddata 当 加 载 媒介 数据 时 运行 脚本 
onloadedmetadata 当 媒 介 元 素 的 持续 时 间 以 及 其 他 媒介 数据 已 加 载 时 运行 脚本 
onloadstart 当 浏 览 器 开始 加 载 媒介 数据 时 运行 脚本 
onpause 当 媒 介 数 据 暂 停 时 运行 脚本 
onplay 当 媒 介 数 据 将 要 开始 播放 时 运行 脚本 
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续 表 
媒介 事件 属性 说 明 
onplaying 当 媒 介 数 据 已 开始 播放 时 运行 脚本 
onprogress 当 浏 览 器 正在 取 媒 介 数 据 时 运行 脚本 
onratechange 当 媒 介 数 据 的 播放 速率 改变 时 运行 脚本 
onreadystatechange 当 就 绪 状 态 (ready-state) 改 变 时 运行 脚本 
onseeked 当 媒 介 元 素 的 定位 属性 不 为 真 且 定位 已 结束 时 运行 脚本 
onseeking 当 媒 介 元 素 的 定位 属性 为 真 且 定 位 已 开始 时 运行 脚本 
onstalled 当 取 回 媒介 数据 过 程 中 (延迟 ) 存 在 错误 时 运行 脚本 
onsuspend 当 浏览 器 已 在 取 媒 介 数 据 但 在 取 回 整个 媒介 文件 之 前 停止 时 运行 脚本 
ontimeupdate 当 媒 介 改变 其 播放 位 置 时 运行 脚本 
onvolumechange 当 媒 介 改 变 音量 或 当 音量 被 设置 为 静音 时 运行 脚本 
onwaiting 当 媒 介 已 停止 播放 但 打算 继续 播放 时 运行 脚本 


5.6 支持 HTML 5 的 浏览 


只 有 技术 标准 是 远 远 不 够 的 ， 更 重要 的 是 浏览 器 产品 遵循 和 支持 这 个 标准 ， 这 是 因为 
HTML 5 生生 2 了 全 林 | 仙 和 人 站 下 全 < 下 面 从 浏览 器 内 核 开 始 介绍 ， 然 
后 再 介绍 支持 HTML 5 的 一 些 常 用 的 浏览 器 


浏览 器 内 核 


浏览 器 最 重要 或 者 核心 的 部 分 是 Rendering Engine， 可 以 翻译 为 “解释 引擎 ”， 不 过 
通常 会 将 其 称 为 “浏览 器 内 核 ”， 负 责 对 网 页 语法 的 解释 (例如 HIML 和 JavaScripb 并 泻 染 
显示 网 页 。 因 此 ， 通 常 所 说 的 “浏览 器 内 核 ” 就 是 浏览 器 所 采用 的 泻 染 引擎 ， 它 决定 了 浏 

此 名 如 何 显示 奖 页 的 内 容 以 及 页 面 的 格式 信息 

不 同 的 浏览 器 内 核对 网 页 编写 语法 的 解释 也 有 不 同 ， 因 此 同一 网 页 在 不 同 内 核 的 浏览 
器 中 的 演 染 显示 效果 可 能 不 同 ， 因 此 ， 网 页 编写 者 需要 在 不 同 内核 的 浏览 器 中 测试 网 页 显 
示 效 果 。 下 面 介绍 几 种 常用 的 浏览 器 内 核 ， 它 们 分 别 是 Trident 内 核 、Gecko 内 核 、Presto 
内 核 、WebKit 内 核 以 及 Blink 内 核 。 


1. Trident 内 核 (EE 内 核 ) 


Trident 内 核 程序 在 1997 年 的 下 4 中 首次 被 采用 ， 是 微软 在 Mosaic 代码 的 基础 上 修改 
而 来 的 ， 并 沿用 到 下 11。Trident 是 一 款 开 放 的 内 核 ， 其 接口 内 核 设计 得 相当 成 熟 ， 因 此 
才 有 许多 采用 正 内 核 而 非 正 的 浏览 器 涌现 。 另 外 ， 为 了 方便 ， 许 多 人 将 Trident 内 核 称 为 
下 内 核 。 

Trident 内 核 的 常用 浏览 器 包括 IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10 
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(Trident 6.0); 360 安全 浏览 器 、 傲 游 浏 览 器 (傲游 1.x、2.x 为 正 内 核 ，3x 为 正 与 WebKit 
双核 )、 百 度 浏览 器 (早期 版 本 )、 世 界 之 窗 浏 览 器 (最 初 为 正 内 核 ，2013 年 采用 Chrome+IE 
内 核 ) 以 及 瑞星 安全 浏览 器 等 。 

其 中 部 分 浏览 器 的 新 版 本 是 “双核 ”甚至 是 “多 核 ”， 其 中 一 个 内 核 是 Trident， 然 后 
再 增加 一 个 其 他 内 核 。 国 内 的 厂商 一 般 把 其 他 内 核 叫 作 “高 速 浏览 模式 ”， 而 Trident 则 
是 “兼容 浏览 模式 ”， 用 户 可 以 来 回 切换 。 

2. Gecko 内 核 (Firefox 内 核 ) 


它 是 Netscape 6 开始 采用 的 内 核 ， 后 来 的 Mozilla Firefox( 火 狐 浏 览 器 ) 也 采用 了 该 内 
核 。Gecko 的 特点 是 代码 完全 公开 ， 可 开发 程度 很 高 ， 全 世界 的 程序 员 都 可 以 为 其 编写 代 
码 增 加 功能 。 由 于 Gecko 是 一 个 开源 内 核 ， 因 此 受到 许多 人 的 青睐 ， 使 用 Gecko 内 核 的 浏 
览 器 也 有 很 多 ， 这 也 是 Gecko 内 核 虽 然 年 轻 但 市 场 占有 率 能 够 迅速 提高 的 重要 原因 。 

Gecko 内 核 常 见 的 浏览 器 包括 Mozilla Firefox、Mozilla SeaMonkey、Epiphany( 早 期 版 
本 )、Flock( 早 期 版 本 ) 和 K-Meleon 等 。 


3. Presto 内 核 (Opera 前 内 核 ) 


Presto 内 核 在 2003 年 的 Opera 7 中 首次 被 使 用 ， 其 特点 就 是 泻 染 速度 的 优化 达到 了 极 
致 ， 然 而 代价 是 牺牲 网 页 的 兼容 性 。Presto 实际 上 是 一 个 动态 内 核 ， 与 前 几 个 内 核 的 最 大 
区 别 在 于 脚本 处 理 。 使 用 Presto 的 除了 Opera 浏览 器 外 ， 还 有 NDSBrowser、Wii Internet 
Channle 和 Nokia 770 网 络 浏览 器 等 ， 这 在 很 大 的 程度 上 限制 了 Presto 的 发 展 。 


4. WebKit 内 核 


Presto 是 Opera 浏览 器 的 前 内 核 ，Opera 12.6 及 更 早 版 本 曾经 采用 的 内 核 ， 现 在 已 经 停 
止 并 废弃 。Opera 现 已 改 用 Google Chrome 的 WebKit 内 核 ， 它 是 一 个 开源 的 浏览 器 内 核 ， 
其 优势 在 于 高 效 稳定 、 兼 容 性 好 、 且 源码 结构 清晰 、 易 于 维护 。WebKit 引擎 包含 
WebCore 排版 引擎 和 JavaScriptCore 解析 引擎 ， 这 两 个 引擎 都 是 从 KDE 的 KHTML 及 KJS 
引擎 衍生 而 来 的 。 

Chrome 浏览 器 、Safari 浏览 器 、Android 默认 浏览 器 、360 极速 浏览 器 以 及 搜狗 浏览 
器 高 速 模式 都 使 用 WebKit 作为 内 核 (在 脚本 理解 方面 ，Chrome 使 用 自己 研发 的 V8 引 
擎 )。WebKit 内 核 在 手机 的 应 用 也 十 分 广泛 ， 例 如 Google 的 手机 Gphone、Apple 的 
iPhone、Nokia 的 Series 60 Browser 等 所 使 用 的 内 核 引 擎 ， 都 是 基于 WebKit 的 。 


5.，Blink 内 核 (Google 的 未 来 内 核 ) 


2013 年 4 月 3 日， 谷歌 在 Chromium Blog 上 发 表 博 客 ， 称 将 与 苹果 的 开源 浏览 器 核心 
Webkit 分 道 扬 镰 ， 在 Chromium 项 目 中 自主 研发 Blink 泻 染 引擎 ( 即 浏览 器 核心 )， 内 置 于 
Chrome 浏览 器 中 。 


5.6.2 ”常用 的 浏览 曙 
目前 ， 许 多 主流 的 浏览 器 都 提供 了 对 HTML 5 技术 的 支持 。 前 面 介绍 了 常用 的 浏览 器 


内 核 ， 这 里 将 介绍 支持 HTML 5 的 常用 的 7 款 浏 览 器 ， 其 中 Chrome 浏览 器 和 Firefox 浏览 
器 最 常用 。 


1. Chrome 浏览 器 


Google Chrome 又 称 为 Google 浏览 器 ， 是 由 Google( 谷 歌 ) 公 司 开 发 的 网 页 浏览 器 。 该 
浏览 器 基于 其 他 开源 软件 撰写 ， 包 括 WebKit， 其 目标 是 提升 稳定 性 、 速 度 和 安全 性 ， 并 创 
造 出 简单 且 有 效率 的 使 用 者 界面 。 

Chrome 浏览 器 支持 多 标签 浏览 ， 每 一 个 选项 卡 面 都 在 独立 的 “ 沙 箱 ”内 和 运行， 在 提 
高 安全 性 的 同时 ， 一 个 选项 卡 面 的 崩溃 不 会 导致 其 他 标签 被 关闭 。 另 外 ，Chrome 浏览 器 
基于 更 强硬 的 JavaScript V8 引擎 ， 这 是 当前 其 他 Web 浏览 器 所 无 法 实现 的 。 

2.，Firefox 浏 览 器 

Mozilla Firefox， 中 文 名 通常 称 为 “火狐 ”或 “火狐 浏览 器 ”， 它 是 一 个 自由 的 、 开 放 
源码 的 网 页 浏览 器 ， 使 用 Gecko 引擎 ( 非 正 内 核 )， 支 持 多 种 操作 系统 (例如 Windows、Mac 
和 Linux)。 

Firefox 浏览 器 除了 体积 小 、 速 度 快 外 ， 还 有 其 他 一 些 高 级 特征 。 例 如 安全 性 高 、 稳 定 
性 好 ;运行 速度 快 ， 占 用 资源 少 ; 个 性 化 十 足 ; 功能 完善 ， 方 便 开发 和 调试 等 。 

3. Opera 浏 览 器 

Opera 浏览 器 即 欧 朋 浏览 器 ， 它 是 一 个 来 自 挪威 的 一 个 极为 出 色 的 浏览 器 ， 具 有 速度 
快 、 节 省 系统 资源 、 订 制 能 力 强 、 安 全 性 高 以 及 体积 小 等 特点 ， 目 前 已 经 是 最 受 欢迎 的 济 
览 器 之 一 。 

Opera 浏览 器 创始 于 1995 年 4 月 ， 它 支持 多 种 操作 系统 ， 例 如 Windows、Linux、 
Mac、FreeBSD、Solaris 和 OS/2 等 。 另 外 ，Opera 还 有 手机 用 的 版 本 ， 例 如 在 Android 手 
机 上 安装 的 Opera Mobile。 


4 本 E 浏 览 器 


Internet Explorer 原 称 Microsoft Internet Explorer 和 Windows Internet Explorer， 人 简称 
下 ， 这 是 微软 公司 推出 的 一 款 网 页 浏览 器 。 目 前 ， 正 的 最 新 版 本 是 11， 它 的 内 核 是 
Trident 7.0。 

5. Safari 浏 览 器 

苹果 公司 推出 一 款 兼 容 微 软 Windows 操作 系统 的 Safari 网 络 浏览 器 ， 试 图 与 它 强大 的 
对 手 分 庭 抗 礼 。Safari 浏览 器 已 经 支持 Windows 平台 ， 但 是 与 运行 在 Mac OSX 上 的 Safari 
相 比 ， 有 些 功能 出 现 丢 失 。 该 浏览 器 也 是 iPhone 手机 、iPodTouch 和 让 ad 平板 电脑 中 指定 
的 默认 浏览 器 。 

6 傲游 浏览 器 


傲游 浏览 器 (傲游 1x、2x 为 正 内 核 ，3.x 为 正 与 WebKit 双核 ) 是 一 款 多 功能 、 个 性 
化 多 标签 浏览 器 。 目 前 ， 傲 游 浏 览 器 的 最 新 版 本 为 4， 与 前 几 个 版 本 相 比 ， 它 的 功能 更 加 
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强大 ， 增 加 了 多 标签 浏览 、 智 能 加 速 、 智 能 填 表 、 在 线 收藏 服务 、Feed 订阅 、 屏 幕 截图 、 
傲游 下 载 ， 以 及 过 滤 包 和 多 语言 支持 等 多 个 内 容 。 

7. 搜狗 浏览 器 

搜狗 浏览 器 被 更 名 为 “搜狗 高 速 浏览 器 ”， 这 是 目前 互联 网 上 最 快速 、 最 流畅 的 新 型 
浏览 器 ， 与 拼音 输入 法 、 五 笔 输入 法 等 产品 一 同 成 为 用 户 高 速 上 网 的 必 备 工具 。 搜 狗 高 速 
浏览 器 拥有 国内 首 款 “ 真 双核 ”(WebKit 和 正 ) 引 擎 ， 采 用 多 级 加 速 机 制 ， 能 大 幅度 提高 用 
户 的 上 网 速度 。 


5.7 ”实战 一 一 Chrome 浏览 器 的 安装 和 测试 


从 前 面 的 介绍 中 可 以 看 到 ， 目 前 ， 已 经 有 许多 浏览 器 支持 HTML 5 技术 。 由 于 HTML 
5 标准 尚未 定稿 ， 导 致 各 种 浏览 器 产品 对 HTML 5 的 支持 程度 差异 较 大 。 因 此 ， 本 节 以 
Chrome 浏览 器 为 例 进行 安装 ， 安 装 完毕 后 在 测试 网 站 上 对 该 浏览 器 进行 测试 。 

Chrome 浏览 器 的 安装 和 测试 步骤 如 下 。 

国 罚 01| 下 载 最 新 版 本 的 Chrome 浏览 器 ， 这 里 下 载 的 版 本 是 v33.0.1750.149。 

找到 下 载 的 Chrome 浏览 器 的 安装 文件 并 双击 ， 这 时 弹出 如 图 5-6 所 示 的 安 


装 对 话 框 。 
x: 
正在 安装 Google Chrome.. 
@chrome 
5-6 安装 Chrome 浏 览 器 
国 到 03] Chrome 浏览 器 安装 完毕 后 的 界面 如 图 5-7 所 示 。 
ER 


感谢 您 安装 "Google Chrome。” 


@chrome 


5-7 “Chrome 浏览 器 安装 完成 
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上 学 提示 : 由 于 各 种 浏览 器 对 HTML 5 的 支持 程度 差异 较 大 ， 因 此 本 书 在 介绍 HTML 
5 时 会 使 用 到 多 个 浏览 器 进行 比较 。 本 节 只 介绍 Chrome 浏览 器 的 安装 和 测试 ， 读 者 可 以 
安装 其 他 的 浏览 器 (例如 Firefox 浏览 器 和 Opera 浏览 器 )， 人 安装 成 功 后 再 进行 测试 。 
浏览 器 安装 完毕 后 ， 需 要 对 其 进行 测试 ， 测 试 某 一 浏览 器 对 HTML 5 的 支 
持 程度 很 简单 ， 直 接 在 地 址 栏 中 输入 http://www.html5test.com 网 址 进行 访问 ， 如 
图 5-8 所 示 。 
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5-8 Chrome 浏览 器 的 得 分 


从 图 5-8 中 可 以 看 出 ， 当 前 使 用 的 Chrome 浏览 器 的 得 分 是 505 分 (总 分 555 分 )， 而 且 
9 前 使 用 的 是 Windows 7 操作 系统 ， 当 前 浏览 器 版 本 是 33。 


有 因 05 | 向 下 拖 动 图 5-8 中 的 滚动 条 ， 查 看 浏览 器 对 HTML 5 的 具体 支持 情况 ， 例 
如 图 5-9 显示 了 Chrome 浏览 器 对 Elements( 元 素 ) 和 Audio 元 素 的 支持 情况 。 
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图 5-9 Chrome 浏 览 器 对 HTML 5 的 支持 
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从 图 5-9 中 可 以 看 出 ， 对 于 Elements 部 分 的 内 容 来 说 ， 得 分 是 25 分 ( 共 30 分 )， 单 击 
打开 某 些 菜 单项 ， 发 现 该 浏览 器 不 支持 部 分 元 素 ， 例 如 dialog 元 素 和 menu 元 素 等 。 对 于 
Audio 元 素来 说 ， 得 分 30 分 ， 这 表示 当前 浏览 器 支持 audio 的 所 有 功能 ， 包 括 AAC、MP3 
和 Ogg 格式 文件 的 支持 。 


上 次 提示 : 图 5.9 只 是 显示 了 Chrome 浏览 器 对 HTML 5 的 部 分 截图 ， 在 该 测试 网 站 
还 可 以 查看 对 video 元 素 、 输 入 内 容 、 离 线 应 用 、 文 件 以 及 3D 和 2D 图 形 的 支持 情况 ， 
这 里 不 再 显示 具体 的 效果 ， 读 者 可 以 登录 该 网 站 进行 测试 和 查看 。 


单 击 图 5-8 中 的 other browsers 菜单 项 ， 可 以 查看 其 他 浏览 器 的 得 分 以 及 先 
前 旧版 本 的 得 分 ， 如 图 5-10 所 示 。 
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5-10 ”其 他 浏览 器 的 得 分 


图 5-10 对 Chrome 浏览 器 、Firefox 浏览 器 、 正 浏览 器 以 及 Opera 浏览 器 进行 比较 ， 
Current 表示 当前 最 新 版 本 的 得 分 ，Older 表示 旧版 本 的 得 分 。 
妇 吕 07| 拖 动 图 5-10 的 工具 条 查看 其 他 信息 ， 或 者 单 击 该 测试 网 站 的 其 他 选项 查 
看 ， 这 里 不 再 显示 具体 的 操作 效果 。 


5.8 本 章 习 题 


1. 填空 题 

(1) 开发 HTML 5 的 三 大 组 织 是 WHATWG、 和 IETF。 

(2) HTML 5 中 使 用 DOCTYPE 的 声明 语法 是 

(3) 在 HIML 5 新 增 的 输入 类 型 中 ， 类 型 用 于 应 该 包含 数值 的 输入 框 。 


a by 
二 者 9 洲 篇 


(4) 和 novalidate 是 HIML 5 新 增 的 与 表单 有 关 的 两 个 属性 。 
(5) 在 HIML 5 新 增 的 标准 属性 中 ， 属性 指定 元 素 的 上 下 文 菜单 。 
2. 选择 题 和 
(GD) HTML 5 中 新 增 的 表单 元 素 不 包括 . 二 
A. output B. header C. datalist D. keygen 如 
(2) 在 HTML 5 新 增 的 表单 属性 中 ， 属性 用 于 验证 输入 框 的 模式 。 
A. multiple B. autofocus C. pattem D. form 
(3) 下 面 的 选项 中 ， 不 是 HTML 5 新 增加 的 元 素 。 
A. command B. meter C. time D. input 
(4) 下 面 的 选项 中 ， 是 HTML 5 中 废除 的 元 素 。 
A. input B. frameset C. meta D. progress 
(5) 下 面 的 选项 中 ， 不 是 HTML 5 新 增 的 表单 事件 属性 。 
A. onerror B. onforminput C. oncontextmenuD. oninput 
(6) 正 浏 览 器 使 用 的 内 核 是 a 
A. Gecko B. Presto C. WebKit D. Trident 


3. 上 机 练习 


(1) 安装 Firefox 浏览 器 并 测试 得 分 

读者 可 以 从 网 站 下 载 最 新 版 本 的 Firefox 浏览 器 并 进行 安装 ， 安 装 完 毕 后 测试 该 浏览 
器 的 得 分 。 

(2) 安装 Opera 浏览 器 并 测试 得 分 

读者 可 以 从 网 站 下 载 最 新 版 本 的 Opera 浏览 器 并 进行 安装 ， 安 装 完毕 后 测试 该 浏览 器 
的 得 分 。 


HTML 5 快速 入 门 


HTML 5 的 新 增 元 素 和 属性 是 它 的 一 大 亮点 ， 这 些 新 增 元 素 使 文档 结构 更 加 
清晰 明确 ， 容 易 阅读 ， 属 性 则 有 助 于 读者 实现 更 强大 的 功能 。 根据 HTML 5 新 
增 元 素 的 使 用 情况 和 语义 ， 可 以 将 它们 进行 不 同 的 分 类 。 有 些 元 素 的 定义 很 模 
糊 ， 以 header 元 素来 说 ， 它 既 可 以 是 结构 元 素 ， 也 可 以 作为 语义 元 素 ， 可 以 将 
该 元 素 放 到 任意 一 种 类 型 中 ， 这 也 是 为 什么 在 不 同 的 参考 资料 中 ， 同 一 个 元 素 所 
属 分 类 乱 同 的 原因 。 

本 章 将 TITRNIIRSRH 的 记者 元 素 分 为 结 莉 元 素 S 分 组 元 素 、 语 义 元 素 、 交 互 
元 需 BA 及 音频 和 视频 元 素 ， 除 了 介绍 这 些 元 素 外 ， 还 会 介绍 HTML 5 中 常用 的 几 
种 标准 属性 。 通过 本 章 的 学 习 ， 读 者 可 以 熟练 地 使 用 这 些 属 性 来 构建 网 页 


本 章 学 习 目标 : 

掌握 HIML 5 中 的 结构 、 分 组 、 文 本 语义 元 素 
掌握 meter 和 progress 元 素 

熟悉 details 和 summary 元 素 

掌握 video、audio 如 何 显示 视频 /音频 

掌握 hidden 属性 的 使 用 

熟悉 contenteditable、spellcheck 属性 的 使 用 


ieeeeee 
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6.1 结构 元 素 


在 HTML 5 中 ， 为 了 使 文档 的 结构 更 加 清晰 明确 ， 逻 辑 思路 更 加 清晰 ， 追 加 了 一 些 与 
页 眉 、 页 脚 、 内 容 区 块 等 文档 结构 关联 的 结构 元 素 。 


(6.1 .1 header 元 素 


HTML 5 新 增 的 header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 用 于 定义 文档 的 
页 眉 ( 介 绍 信息 )。header 元 素 通常 用 来 放置 整个 页 面 或 页 面 内 的 一 个 内 容 区 块 的 标题 ， 也 
可 以 包含 网 站 Logo 图 片 、 数 据 表 格 和 搜索 表单 等 内 容 。 

整个 页 面 的 标题 应 该 放 在 页 面 的 开头 ， 它 的 使 用 与 其 他 元 素 一 样 。 基 本 格式 如 下 : 

<header> 


<h1> 网 页 主题 </h1> 
</header> 


i 在 一 个 HTML 网 页 中 ， 并 不 限制 header 元 素 的 个 数 。 一 个 网 页 中 可 以 拥 
有 多 个 header 元 素 ， 也 可 以 为 每 一 个 内 容 块 添加 header 元 素 。 


【 例 6.1】 
在 一 个 完整 的 网 站 中 ， 首 先 会 设计 网 站 的 页 面 布局 。HTML 5 出 现 之 前 ， 通 常会 使 用 
以 下 代码 来 表示 标题 : 
<div id="content"> 
<div id="header"> 
<div class="left"> 
<h1> 茶 叶 模 板 </h1> 
<h2> 各 种 茶 类 </h2> 
</div> 
</div> 
<!-- 其 他 内 容 --> 


</div> 
在 上 述 代码 中 ， 最 外 侧 的 div 元 素 搭建 整个 网 站 的 框架 ，id 属性 值 为 header 的 div 元 
素 表示 网 站 的 头 部 信息 ， 该 头 部 信息 中 包含 两 个 标题 ，hl 元 素 指定 主 标题 ，h2 元 素 指定 
副标题 。 另 外 ， 可 以 通过 不 同 种 类 的 选择 器 (例如 ID 选择 器 和 样式 选择 器 ) 为 div 元 素 添 加 
CSS 样式 。 上 述 内 容 的 部 分 CSS 样式 代码 如 下 : 
#content { 
margin: 0 auto; 
padding: 0; 
width: 770px; 


background: inherit; 
Color: #454545; 


#header { 


ce 


height: 120px; 
background: #000 url (images/top2.jpg) no-repeat top center; 
margin-bottom: Opx; 
color: #454545; 
overflow: hidden; 

1 

#header .left { 
width: 190px; 
float: left; 
text-align: center; 
padding-left: 14px; 


> 注 讶 9 1NLH 协 9 流 较 
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和 
根据 上 述 描述 内 容 ， 通 过 使 用 header 元 素来 奉 换 id 属性 值 为 header 的 div 元 素 。 页 面 
相关 代码 如 下 : 


<header> 
<div class=" left"> 
<h1> 茶 叶 模 板 </h1> 
<h2> 各 种 茶 类 </h2> 
</div> 
</header> 


重新 更 改 与 header 元 素 相关 的 CSS 代码 ， 直 接 通 过 元 素 选择 器 指定 样式 。 也 可 以 
将 使 用 #beader(ID 选择 器 ) 设 置 的 代码 通过 header( 元 素 选择 器 ) 替 换 。 部 分 代码 如 下 : 
header { 

height: 120px; 

background: #000 url (images/top2.jpg) no-repeat top center; 
margin-bottom: Opx; 

color: #454545; 

overflow: hidden; 


说 


} 
在 浏览 器 中 运行 更 改 后 的 HTML 网 页 ， 查 看 效果 ， 如 图 6-1 所 示 。 


请 header 元 素 >x 全 _ _ 
© DD file///D:/htmlS/element/first/index.html 灾 | 三 | 


6-1 header 元 素 的 使 用 


(6.1 .2 article 元 素 


article 元 素 代表 文档 、 页 面 或 者 应 用 程序 中 独立 的 、 完 整 的 、 可 以 独自 被 外 部 引用 的 
内 容 。 它 可 以 是 一 篇 博客 或 者 报刊 中 的 文章 、 一 篇 论坛 帖子 、 一 段 用 户 评论 或 独立 的 插 Dp A 
件 ， 或 者 其 他 任何 独立 的 内 容 。 
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article 元 素 可 以 单独 使 用 ， 也 可 以 和 其 他 元 素 结合 使 用 。 一 个 article 元 素 通常 可 以 包 
含 它 自己 的 标题 ， 标 题 一 般 放 在 header 元 素 中 ; 有 时 还 可 以 有 脚注 ， 脚 注 一 般 放 在 footer 
元 素 中 。 

【 例 6.2】 

下 面 通过 article 元 素 显 示 一 首 歌曲 的 内 容 。 其 中 通过 header 元 素 嵌 入 歌曲 的 标题 ， 歌 
曲 标题 放 在 hl 元 素 中 ， 在 歌曲 的 标题 下 嵌入 了 一 大 段 该 歌曲 的 歌词 ， 这 些 内 容 放 在 pre 元 
素 中 。 代 码 如 下 : 


<article> 

<header> 

<h1> 时 间 都 去 哪 啦 </h1> 

</header> 

<pre> 

<p> 门 前 老 树 长 新 芽 ” 院 里 枯木 又 开花 半生 存 了 好 多 话 ” 藏 进 了 满 头 白 发 </p><p> 记 忆 

中 的 小 脚 Y”” 肉 嘟 嘟 的 小 嘴巴 一 生 把 爱 交 给 他 ”只 为 邦 一 声 爸 妈 </p><p> 时 间 都 去 哪儿 了 
还 没 好 好 感受 年 轻 就 老 了 
生 儿 养女 一 辈子 
满 脑子 都 是 孩子 哭 了 笑 了 </p><p> 时 间 都 去 哪儿 了 
还 没 好 好 看 看 你 眼睛 就 花 了 
柴米油盐 半辈子 
转眼 就 只 剩 下 满 脸 的 皱纹 了 </p> 

</pre> 
</article> 


直接 通过 元 素 选择 器 为 article 元 素 添加 CSS 样式 ， 内 容 如 下 : 


article { 
width: 736px; 
margin-right: auto; 
margin-left: auto; 
padding: 10px; 
background: #FFF; 
color: #444; 
display: block; 


} 
在 浏览 器 中 运行 上 述 代码 查看 效果 ， 如 图 6-2 所 示 。 


oridei 要 C 
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时 间 都 去 哪 啦 
门 才 则 基 钉 首 。 所 竹林 妈 开花 书生 存 了 籽 允 活 本 吉 了 黄白 友 
局 的 J 后 站 向 99 小 晶 巴 。 一 生 近 交 营 诉 只 沪 基 一 丙 六 生 


ed 
还 有 每 季 碗 证 和 起 老 了 
生 儿 种 娘 一 基 
好 是 法子 美 7 关 了 


6-2 article 元 素 的 使 用 


虹 提示 : article 元 素 是 可 以 进行 谈 套 的 ， 内 层 的 内 容 在 原则 上 需要 与 外 层 的 内 容 相 
关联 。 例 如 一 篇 文章 ， 针 对 该 文章 的 评论 就 可 以 使 用 餐 套 article 元 素 的 方式 ， 用 来 呈现 
评论 的 article 元 素 被 包含 在 表示 整体 内 容 的 article 元 素 中 。 


(1 .3 section 元 素 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。 一 个 section 元 素 通 常 由 
内 容 和 标题 组 成 。 但 是 section 元 素 并 非 一 个 普通 的 容器 元 素 ， 当 一 个 容器 需要 被 直接 定义 
样式 或 通过 脚本 定义 行为 时 ， 推 荐 使 用 div 元 素 ， 而 不 是 section 元 素 。 

在 使 用 section 元 素 时 ， 需 要 注意 以 下 3 点 : 

@ ”不 要 将 section 元 素 用 作 设 置 样式 的 页 面容 器 ， 那 是 div 元 素 的 工作 。 

@ ”如 果 article 元 素 、aside 元 素 或 nav 元 素 更 符合 使 用 条 件 ， 那 么 不 要 使 用 section 

元 素 。 
e@ ”不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 


岂 注意 : 通常 不 推荐 为 那些 没有 标题 的 内 容 使 用 section 元 素 ， 可 以 使 用 HIML 5 

轮廓 工具 (网 址 是 http://gsnedders.html5.org/outline/) 来 检查 页 面 中 是 否 有 没 标题 的 
section。 如果 使 用 该 工具 检查 后 发 现 某 个 section 的 说 明 中 有 untitiled section( 没 有 标题 的 
section) 文 字 ， 这 个 section 就 有 可 能 使 用 不 当 (但 是 nav 或 aside 元 素 没有 标题 是 合理 的 )。 


【 例 6.3】 
在 例 6.2 的 基础 上 添加 代码 ， 通 常 article 元 素 的 嵌 套 显示 歌曲 的 评论 信息 ， 这 些 歌词 
信息 作为 一 个 独立 的 区 域 进行 显示 。 部 分 代码 如 下 : 


<article> 
<!-- 其 他 内 容 --> 
<section> 
<h2> 关 于 这 首 歌 词 ， 有 人 感动 ， 有 人 感叹 ， 也 有 人 吐槽 。</h2> 
<article> 
<h1> 感 动 篇 </h1> 
<p> 网 友 雨 纷飞 说 : 时 间 都 去 哪儿 了 ， 看 着 父母 满 头 白 发 ， 心 里 一 点 点 的 愧 次 起 
来 ， 这 么 多 年 ， 自 己 为 他 们 做 过 些 什么。 时 间 都 去 哪 了 ? </p> 
<p> 网 友 LoveMe 说 : 爸爸 妈妈 辛苦 了 ! ! </p> 
</article> 
<article> 
<h1> 吐 槽 篇 </h1> 
<p> 网 友 毛毛 虫 说 : 时 间 都 去 哪儿 了 ， 时 间 都 去 这 了 。 (PS: <a href="#"> 点 我 
查看 </a>) </p> 
</article> 
</section> 
</article> 


为 article 元 素 下 的 h2 元 素 添加 CSS 样式 ， 样 式 代 码 如 下 : 


article h2 { 
font-weight: bold; 
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padding: 10px 10px 10px 10px; 
color: #C61C18; 
font-size: 12px; 

1 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 6-3 所 示 。 


二 | 
ection 二 x 人 
i © DO file///D/htmlS/element/third/index html 3 
美 于 论 首 歌 词 ， 有 人 感动 。 有 人 刁 职 ， 电 有 人 对 备 ~ 
中 爸 
同 二 i" 灌 : 时 间 朋 去 者 儿 了 ， 看 六 义 瑟 六 天 白 发 ， 心 里 一 点 吉 的 怕 商 杞 未 ， 论 魏 具 年， 自己 为 俐 们 教训 营 什 么 - 时 间 邮 去 者 了 ? 
网友 LoveMe 以 : 益 世 内 全 闻 加 了 1 上 
星 得 这 | 
癌 丰 无 苇 生 大: 时 间 椰 去 赫 儿 了 ,时 ji 二 去 这 了 。 (95: 后 才 下 看 ) 
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在 为 歌词 添加 评论 信息 时 ， 使 用 到 了 section 元 素 ， 该 元 素 把 歌词 正文 与 评论 信息 进行 
了 区 分 。 将 评论 内 容 进 行 了 分 类 ， 每 一 类 都 是 一 段 独立 的 、 完 整 的 内 容 ， 因 此 使 用 多 个 
article 元 素 。 

section 元 素 的 作用 是 对 页 面 上 的 内 容 进 行 分 块 ， 或 者 说 对 文章 进行 分 段 。 实 际 上 ， 在 
HTML 5 中 ，article 元 素 可 以 看 作 是 一 种 特殊 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 
性 ， 即 section 元 素 强调 分 段 或 分 块 ， 而 article 强调 独立 性 。 具 体 来 说 ， 如 果 一 块 内 容 相对 
来 说 比较 独立 、 完 整 时 ， 应 该 使 用 article 元 素 ; 但 是 如 果 想 要 将 一 块 内 容 分 成 多 段 时 ， 应 
该 使 用 section 元 素 。 


人 :1 .4 nav 元 素 


nav 元 素 是 一 个 可 以 用 作 页 面 导航 的 链接 组 ， 其 中 的 导航 元 素 链接 到 其 他 页 面 或 当前 
页 面 的 其 他 部 分 。 并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 元 素 ， 只 需要 将 主要 的 、 基 本 的 链 
接 组 放 进 nav 元 素 即 可 。 
一 个 HTML 网 页 中 可 以 包含 多 个 nav 元 素 ， 作 为 页 面 整体 或 者 不 同 部 分 的 导航 。 具 体 
来 说 ，nav 元 素 可 以 用 于 以 下 几 种 场合 。 
@ ”传统 导航 条 : 目前 主流 网 站 上 都 有 不 同 层级 的 导航 条 ， 其 作用 是 将 当前 画面 跳 转 
到 网 站 的 其 他 主要 页 面 。 
e@ 侧 边栏 导航 : 目前 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 
从 当前 文章 或 当前 商品 跳 转 到 其 他 文章 或 其 他 商品 页 面 。 
e@ ”页 内 导航 : 它 在 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 
e ” 翻 页 操作 翻 页 操作 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 
除了 以 上 几 点 而 外 ，nav 元 素 也 可 以 用 于 其 他 开发 者 觉得 是 重要 的 、 基 本 的 导航 链接 


CO 


[2 

【 例 6.4] 名 
几乎 所 有 的 网 站 都 少不了 导航 链接 ， 本 示例 通过 nav 元 素 定义 一 个 导航 链接 。 实 现 步 。 
骤 如 下 。 
向 HTML 页 面 中 添加 导航 链接 元 素 ， 在 该 导航 元 素 内 嵌入 多 个 超 链接 元 5 
素 。 代 码 如 下 ; 吉 

<nav> 襄 


<a href="#"> 首 页 </a> | <a href="#"> 新 闻 动 态 </a> | <a href="#"> 规 范 标准 
</a> | <a href="#"> 文 章 教程 </a> | <a href="#"> 资 源 链接 /a> | <a href="#"> 常 
见 问 题 </a> | <a href="#"> 论 坛 交流 </a> 


</nav> 

为 上 述 nav 元 素 和 该 元 素 下 的 a 元 素 添加 CSS 样式 。 以 nav 元 素 为 例 ， 样 
式 代码 如 下 : 

nav { 


float: left; 
padding-top: llpx !important; 
padding-top: 9px; 
background: transparent no-repeat right top; 
color: #FFF; 
height: 27px; 
text-align: center; 
line-height: 27px; 
} 


在 浏览 器 中 运行 上 述 代 码 观察 效果 ， 如 图 6-4 所 示 。 


J nev 元 素 下 
C |@ file///Di/htmlS/element/four/index.html 立 | 三 | 


娩 网 页 设计 师 


6-4 ”nav 元素 的 使 用 


2 注意 : HTML 5 中 不 要 使 用 menu 元 素 代替 nav 元 素 ， 过 去 有 很 多 Web 应 用 程序 

的 开发 者 喜欢 使 用 menu 元 素 进行 导航 。 在 这 里 有 必要 进行 强调 : menu 元 素 是 用 在 一 系 
列 发 出 命令 的 菜单 上 的 ， 是 一 种 交互 性 的 元 素 ， 或 者 更 确切 地 说 ， 是 使 用 在 Web 应 用 
程序 中 的 。 


(6.1 .5 aside 元 素 


aside 元 素 用 来 表示 当前 页 面 或 者 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 、 


内 容 相关 的 引用 、 侧 边栏 、 广 告 、 导 航 条 ， 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 一 般 ” 
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情况 下 ，aside 元 素 有 以 下 两 种 用 法 : 


e@ ”被 包含 在 article 元 素 中 作为 主要 内 容 的 附属 信息 ， 其 中 的 内 容 可 以 是 与 当前 文章 
有 关 的 参考 资料 、 名 词 解释 等 。 

e ”在 article 元 素 之 外 使 用 ， 作 为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 形式 是 
侧 边栏 ， 其 中 的 内 容 可 以 是 友情 链接 、 博 客 中 其 他 文章 列表 和 广告 单元 等 。 

【 例 6.5】 

在 介绍 文言 文 的 书籍 中 ， 会 将 一 些 比较 复杂 、 难 以 理解 的 字 或 词 放 在 当前 页 的 底部 进 


行 解释 。 下 面 通过 aside 元 素 模拟 实现 一 个 类 似 的 功能 ， 效 果 如 图 6-5 所 示 。 


) 证 asde 元 于 xx 
@& 口 fleVWDVhtmls/elemenVfive/index html 疗 | 三 


鱼 我 所 欲 也 


本 今 为 宫室 之 美 为 之 ! 多 为 身 
4 多 为 生 开 而 不 最 ， 今 为 所 只 究 卫 者 be 


(1) 亦 : 也 。 
(2) 俭 : 相 要 。 
(3) 莱 : 四 时 具有 


6-5 aside 元 素 的 效果 


向 HTML 网 页 中 添加 article 元 素 ， 在 该 元 素 中 获 入 header 元 素 显 示 标 题 ， 
嵌入 p 元 素 显示 文章 内 容 。 代 码 如 下 : 


<article> 
<header> 
<h1> 鱼 我 所 欲 也 </h1> 
</header> 
<p>snbsp; gnbsp;snbsp;&gnbsp;snbsp;gnbsp; 鱼 ， 我 所 欲 也 ， 熊 掌 ， 亦 
<sup> (1) </sup> 我 所 欲 <sup> (2) </sup> 也 ， 二 者 不 可 得 兼 <sup> (3)</sup>， 售 鱼 而 取 熊 掌 
者 也 。 生 ， 亦 我 所 欲 也 ， 义 ， 亦 我 所 欲 也 ， 二 者 不 可 得 兼 ， 售 生 而 取 义 者 也 。 生 亦 我 所 欲 ， 所 欲 有 
甚 于 生 者 ， 故 不 为 苟 得 也 。 死 亦 我 所 恶 ， 所 亚 有 甚 于 死者 ， 故 患 有 所 不 辟 也 。 如 使 人 之 所 欲 莫 甚 于 
生 ， 则 凡 可 以 得 生 者 何不 用 也 。 使 人 之 所 恶 莫 其 于 死者 ， 则 凡 可 以 避 患 者 何不 为 也 ! 由 是 则 生 而 有 
不 用 也 ; 由 是 则 可 以 避 患 而 有 不 为 也 。 是 故 所 欲 有 甚 于 生 者 ， 所 恶 有 甚 于 死者 。 非 独 贤 者 有 是 心 
也 ， 人 皆 有 之 ， 贤 者 能 勿 丧 耳 。<br/> 
<!-- 省 略 其 他 内 容 --> 
</p> 
<!-- 其 他 内 容 --> 


</article> 


在 上 个 步骤 的 基础 上 添加 代码 ， 向 p 元 素 之 后 添加 aside 元 素 ， 用 来 存放 名 
词 解 释 部 分 的 内 容 : 
<aside> 
<dl> 
<h1> 名 词 解 释 </h1> 
<dt> (1) 亦 : 也 。</dt> 
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在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 。 


(6.1 .6 footer 元 素 


footer 元 素 很 容易 理解 ， 它 可 以 作为 其 上 层 父 级 内 容 区 块 或 者 是 一 个 根 区 块 的 脚注 。 
它 通常 包含 相关 区 块 的 脚注 信息 ， 例 如 作者 、 相 关 阅 读 链 接 及 版 权 信息 等 。 在 HIML 5 出 
现 之 前 ， 通 常 都 是 使 用 <div id="“footer”></div> 标 记 来 实现 的 ，HTML 5 出 现 之 后 ， 直 接 使 
用 footer 元 素来 代替 。 
footer 元 素 与 header 元 素 一 样 ， 一 个 页 面 中 可 以 使 用 多 个 footer 元 素 。 同 时 ， 可 以 为 
article 元 素 或 者 section 元 素 添加 footer 元 素 。 
【 例 6.6】 
下 面 的 代码 在 页 面 的 最 后 使 用 footer 元 素 显 示 脚 注 信息 : 
<footer> 
<div id="r">&copy; Copyright 2014, my love website<br />Design: <a 
href="#">Lucy </a></div> 
<div id="1"> 
<a href="# ">XHTML</a> - <a href="#">CSS</a> 


</div> 
</footer> 


多 

第 
<dt> (2) 欲 : 想 要 。</dt> O) 
<dt> (3) 兼 : 同时 具有 。</dt> 殖 
<dd></dd> 于 
</dl> 刁 
</aside> 三 
a 

快 

速 

入 
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6.2 分 组 元 素 


顾名思义 ， 分 组 元 素 就 是 对 页 面 中 的 内 容 进 行 分 组 的 。HTML 5 中 涉及 到 3 个 与 分 组 
有 关 的 元 素 : hgroup 元 素 、figcaption 元 素 和 figure 元 素 。 


(6.2.1 hgroup 元 素 


hgroup 元 素 是 将 标题 及 其 子 标题 进行 分 组 的 元 素 ， 该 元 素 通 常会 将 hl 到 h6 元 素 进 行 
分 组 ， 例 如 一 个 内 容 区 块 的 标题 及 其 子 标题 算 作 一 组 。 

【 例 6.7】 

观察 图 6-1 中 的 效果 和 例 6.1 的 代码 ， 可 以 发 现 ， 通 过 header 元 素 设计 头 部 时 包含 了 
两 个 标题 ， 一 个 主 标题 ， 一 个 副标题 。 其 中 ， 主 标题 通过 hl 元 素 表 示 ; 副标题 通过 h2 元 
素 表示 。 在 例 6.1 中 通过 div 标记 将 它们 两 个 进行 分 组 ， 并 且 通 过 class 设置 样式 。 

HTML 5 中 增加 hgroup 元 素 之 后 ， 可 以 直接 通过 该 元 素 进 行 分 组 。 代 码 如 下 : 

<header> 


<hgroup> 


<h1> 茶 叶 模板 </h1> AS 信 
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<h2> 各 种 茶 类 </h2> 
</hgroup> 
</header> 
如 果 有 必要 ， 还 需要 为 hgroup 元 素 指 定 CSS 样式 ， 样 式 代码 和 运行 效果 这 里 不 再 进 
行 演示 了 。hgroup 元 素 并 不 是 想 用 就 用 的 ， 通 常情 况 下 ， 在 使 用 hgroup 元 素 时 ， 需 要 遵循 
以 下 几 个 条 件 : 
@ ”如 果 只 有 一 个 标题 元 素 (h1~h6 中 的 一 个 )， 不 建议 使 用 hgroup 元 素 。 
@ 当 出 现 一 个 或 者 一 个 以 上 的 标题 和 元 素 时 ， 推 荐 使 用 hgroup 元 素 作为 标题 容器 。 
e@ 当 一 个 标题 有 副标题 、 其 他 section 或 者 article 的 元 数据 时 ， 建 议 将 hgroup 元 素 
和 元 数据 放 到 一 个 单独 的 header 元 素 容器 中 。 


6.2.2 figcaption 和 figure 


在 HIML 5 中 ，figcaption 元 素 用 于 定义 figure 元 素 的 标题 ， 该 元 素 应 该 被 放 到 figure 
元 素 的 第 一 个 或 者 最 后 一 个 子 元 素 的 位 置 。 

在 HIML 5 中 ，figure 元 素 指定 独立 的 流 内 容 ， 例 如 图 像 、 图 表 、 照 片 和 代码 等 。 

figure 元 素 的 内 容 应 该 与 主 内 容 无 关 ， 如 果 被 删除 ， 则 不 会 对 文章 流产 生 影响 。 在 使 
用 figure 元 素 时 ， 可 以 通过 figcaption 元 素 添 加 标题 。 一 个 figure 元 素 内 最 多 只 允许 放置 一 
个 figcaption 元 素 ， 但 是 允许 放置 多 个 其 他 元 素 。 

【 例 6.8】 

本 例 通过 article 显示 一 篇 文章 ， 在 文章 的 最 后 显示 一 张 图 片 ， 并 且 指 定 图 片 的 标题 。 
将 图 片 和 标题 放 在 figure 元 素 中 ， 并 且 在 该 元 素 中 嵌入 figcaption 元 素 ， 指 定 特定 的 标题 
信息 。 相 关 代 码 如 下 : 

<figure> 

<h2> 愿 得 一 人 心 ， 与 你 不 相 离 </h2> 


<img src="images/hope.jpeg"/> 
</figure> 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 6-6 所 示 。 


C= 
人 了 © fe//D /Mms/eiement/eghtinden Mm 日 


亚 短 一 人 心 ， 与 你 不 如 记 
Ce wg. ons ANON. BOne. caaus4dg. £2 ox -FHEe. 7 1. men 
DT? 
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二 
于 此 。 它 同样 可 以 用 来 表示 音频 插件 、 视 频 插件 或 者 统计 表格 等 。 


6.3 文本 语义 元 素 


语义 元 素 ， 即 “元 素 的 意义 ”。 具 体 来 说 ， 就 是 语义 元 素 能 够 为 浏览 器 和 开发 者 清楚 
地 描述 其 意义 。 例 如 ， 可 以 将 header 和 footer 等 元 素 看 作 是 语义 元 素 ， 而 div 则 属于 无 语 
头 元 素 。 

下 面 介 绍 HTML 5 中 新 增 的 几 种 文本 语义 元 素 ， 它 们 分 别 是 mark 元 素 、mby、rt 和 tp 
元 素 、time 元 素 以 及 wbr 元 素 。 


(6.3.1 mark 元 素 


mark 元 素 表示 页 面 中 需要 突出 显示 或 者 高 亮 显示 的 对 于 当前 用 户 具有 参考 作用 的 一 段 
文字 。 

mark 元 素 通常 作用 在 两 个 方面 : 第 一 个 方面 是 对 网 页 全 文 检索 某 个 关键 词 时 显示 的 检 
查 结果 ， 目 前 许多 搜索 引擎 使 用 其 他 方法 实现 该 元 素 所 达到 的 功能 ， 另 一 个 方面 是 在 引用 
原文 时 ， 为 了 某 种 特殊 目的 而 把 原文 作者 没有 特别 重点 标示 的 内 容 给 标示 出 来 。 

【 例 6.9】 

下 面 的 代码 显示 了 一 篇 文章 的 部 分 节选 内 容 ， 这 篇 文章 的 标题 是 “人 生 没 有 假如 ”， 
因此 在 文章 的 节选 部 分 为 了 强调 “人 生 没 有 假如 ”， 通 过 mark 元 素 将 这 个 几 个 字 给 高 亮 
显示 出 来 。 代 码 如 下 : 

<article> 

<header> 

<h1> 人 生 没有 假如 </h1> 

</header> 

<p>gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; ” 面 对 人 生 ， 就 要 像 林 信 玉 刚 进 贾 府 孝 
样 就 ， 步 步 小 心 ， 时 时 在 意 ; 不 敢 多 走 一 步 路 ， 不 敢 多 说 一 句 话 。 人 生 ， 得 低头 时 且 低头 吧 ， 有 
事 ， 不 忍辱负重 ， 又 怎 可 能 迎 来 艳阳 天 呢 ! 古人 日 :" 唯 有 埋头 ， 方 能 出 头 ! "</p> 

<p>gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; <mark> 人 生 没 有 假如 </mark>， 不 要 把 
希望 放 在 明天 ， 也 不 要 让 人 生 等 待 未 来 ， 那 是 很 不 现实 的 。 明 天 的 日 子 如 何 ， 未 来 的 人 生 怎 样 ， 全 
在 此 时 此 刻 的 努力 。</p> 

<p>gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; <mark> 人 生 没 有 假如 </mark>， 不 要 对 

它 抱 着 幻想 。 忘 记 你 所 失去 的 ， 珍 惜 你 所 拥有 的 。 这 样 ， 尽 管 人 生 未 必 没有 遗憾 ， 但 也 可 以 无 悔 

了 。 谁 都 不 能 对 一 个 努力 的 生命 抱 太 多 的 苛 责 。 所 以 说 ， 不 管 是 怎样 的 人 生 ， 只 要 尽力 了 ， 也 就 难 

得 了 ， 也 就 不 需要 假如 了 。</p> 


</article> 

在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 6-7 所 示 。 

在 HIML 4 中， 还 可 以 使 用 em 元 素 或 者 strong 元 素 突出 显示 文字 ， 但 是 mark 元 素 的 
作用 是 与 它们 有 区 别 的 ， 不 能 混同 使 用 。 
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面 对 人 生 ， 就 要 像 林 绕 王 有 进 要 府 那 样 就 ， 步 步 小 心 ， 时 时 在 意 ; 不 吉 多 走 一 步 路 ， 不 敢当 说 一 名 活 。 人 生 ， 得 低头 时 有 低头 吧 , 有 
事 ， 不 忍辱负重 ， 又 怎 可 能 印 来 实 阳 天 呢 ! 古人 日 : 公有 埋头 ， 方 能 出 头 ! 


人 生 没有 眼 如 ， 不 要 把 希望 示 在 明天 ， 也 不 要 让 人 生 等 待 示 来， 那 是 很 不 现实 的 。 明天 的 日 子 如 何 ， 示 来 的 人 生 怎 样 ， 全 在 此 时 此 刻 的 
努力 。 


没有 息 如 ， 不 要 对 它 抱 着 各 起 。 忘记 你 所 和 去 的 ， 了 珍惜 你 所 拥有 的 。 这 样 ， 尽 管 人 生 未 必 没有 和 遗 怪 ， 但 也 可 以 无 性 了。 谁 都 不 能 对 
一 个 卷 力 的 生命 抱 太 多 的 节 责 。 所 以 说 ， 不 管 是 怎样 的 人 生 ， 只 要 尽力 了 ， 也 就 难得 了 ， 也 就 不 需要 假如 了 。 


6-7 mark 元 素 的 使 用 


下 面 分 别 对 mark、strong 和 em 元 素 进 行 说 明 。 

@ ”mark: 该 元 素 与 原文 作者 无 关 ， 或 者 说 ， 它 不 是 原文 作者 用 来 标示 文字 的 ， 而 是 
在 后 来 引用 时 添加 上 去 的 ， 其 目的 是 吸引 用 户 的 注意 力 ， 提 供给 用 户 作为 参考 ， 
希望 对 用 户 有 所 帮助 
pi 该 元 素 是 原文 作者 用 来 强调 一 段 文字 的 重要 性 的 (例如 警告 信息 )。 

: 该 元 素 是 作者 为 了 突出 文章 重点 而 使 用 的 。 


6.3.2 ruby、rt 和 rp 元 素 


ruby 定义 ruby 注释 ， 通 常 与 rt 和 1p 元 素 一 块 使 用 。rt 元 素 定 义 ruby 注释 的 解释 ， 如 
果 浏 览 器 不 支持 ruby 元 素 显示 的 内 容 ， 就 会 显示 tp 元 素 定义 的 内 容 。 

ruby 注释 是 中 文 注音 或 字符 ， 在 东亚 使 用 ， 显 示 的 是 东亚 字条 的 发 音 。ruby 元 素 由 
一 个 或 者 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 成 ， 还 包括 可 选 的 
Tp 元 素 。 

【 例 6.10】 

rmby、rtt 和 zp 的 使 用 非常 简单 ， 下 面 通过 两 种 方式 演示 这 些 元 素 。 代 码 如 下 : 

<ruby> 

汉 <rt><rp> (</rP> 厂 马 、 <rp>)</rp></rt> 
</ruby> 
<ruby> 


汉 <rt>ic</rt><rp> 五 笔 拼写 : hc</rp> 
</ruby> 


6.3.3 ”time 元 素 


time 元 素 定义 公历 的 时 间 (24 小 时 制 ) 或 日 期 ， 时 间 和 时 区 偏 移 是 可 选 的 。 该 元 素 能 够 
以 机 器 可 读 的 方式 对 日 期 和 时 间 进 行 编码 。 举 例 来 说 ， 用 户 代理 能 够 把 生日 提醒 或 排 定 的 
事件 添加 到 用 户 日 程 表 中 ， 搜 索引 擎 也 能 够 生成 更 智能 的 搜索 结果 。 

datetime 和 pubdate 属性 是 time 元 素 常用 的 两 个 属性 。datetime 属性 指定 日 期 /时 间 ， 
否则 ， 由 元 素 的 内 容 给 定 日 期 /时 间 ; pubdate 属性 指定 time 元 素 中 的 日 期 /时 间 是 文档 (或 


N 


全 

区 第 
article 元 素 ) 的 发 布 日 期 。 
【 例 6.11]】 2 
目前 ， 所 有 的 主流 浏览 器 都 不 提供 对 time 元 素 的 支持 。 如 下 代码 演示 了 time 元 素 的 疆 
基本 使 用 : 6 
<p> 李 瑶 每 天 早上 <time>7:00</time> 起 床 ， 每 天 晚上 <time>10:00</time> 睡 觉 。</p> 
<p> 李 瑶 <time datetime="2015-02-14"> 情 人 节 </time> 有 个 约会 。</p> 六 

癌 


6.3.4 wbr 元 素 


wbr 即 Word Break Opportunity，wbr 元 素 指 定 在 文本 中 的 何 处 适合 添加 换行 符 。 如 果 
外 词 过 长 ， 或 者 开发 者 担心 浏览 器 会 在 错误 的 位 置换 行 ， 那 么 也 可 以 使 用 wbr 元 素来 添加 
外 词 换 行 时 机 。 

【 例 6.12】 

wbr 元 素 的 使 用 也 非常 简单 ， 下 面 的 代码 演示 了 该 元 素 的 基本 使 用 : 

<nobr> 此 行文 本 不 会 断 行 ， 不 管 窗口 的 宽度 如 何 。</nobr> 

<nobr> 但 是 ， 本 行 ， 如 果 <WBR> 窗 口 的 宽度 太 小 的 话 ， 将 在 "如 果 " 之 后 断 行 。</nobr> 


jm 


6.4 交互 元 素 


HTML 5 是 一 些 独立 特性 的 集合 ， 它 不 仅 增加 了 许多 Web 页 面 特征 ， 而 且 本 身 也 是 一 
个 应 用 程序 。 对 于 应 用 程序 而 言 ， 表 现 最 为 突出 的 就 是 交互 操作 。HTML 5 为 操作 新 增加 
了 对 应 的 交互 体验 元 素 ， 本 节 来 简单 了 解 这 些 元 素 。 


(6.4.1 meter 元 素 


meter 是 HTMLS5 新 追加 的 用 来 定义 度量 衡 的 元 素 ， 该 元 素 仅 用 于 已 知 最 大 和 最 小 值 的 
度量 。 例 如 ， 显 示 硬 盘 容 量 或 者 对 某 个 候选 者 的 投票 人 数 占 投 票 总 人 数 的 比例 等 ， 都 可 以 
使 用 meter 元 素 。 

meter 元 素 的 开始 标记 和 结束 标记 之 间 可 以 添加 文本 ， 在 浏览 器 不 支持 该 元 素 时 可 以 
显示 标记 之 间 的 文字 。 基 本 格式 如 下 : 

<meter> 浏 览 器 不 支持 mete 元 素 </meter> 

<meter> 标 记 包含 多 个 属性 ， 如 表 6-1 显示 了 常用 的 6 个 属性 。 

表 6-1 meter 元 素 的 常用 属性 
说 明 

定义 需要 显示 在 min 和 max 之 间 的 值 ， 这 是 在 元 素 中 特地 表示 出 来 的 实际 值 。 默 认 值 为 0 
定义 允许 范围 内 的 最 小 值 ， 默 认 值 为 0。 该 属性 的 值 不 能 小 于 0 yp a 
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续 表 

属性 名 称 说 明 

max 定义 允许 范围 内 的 最 大 值 ， 默 认 值 为 1。 如 果 该 属性 的 值 小 于 min 属性 的 值 ， 那 么 把 
min 视 为 最 大 值 

low 定义 范围 内 的 下 限 值 ， 必 须 小 于 或 等 于 high 属性 的 值 。 如 果 该 值 小 于 min， 则 使 用 min 
作为 low 属性 的 值 

high 定义 范围 内 的 上 限 值 ， 如 果 该 属性 值 小 于 low， 则 使 用 low 作为 high 的 值 。 如 果 该 值 大 
于 max， 则 使 用 max 作为 high 属性 的 值 

optimum | 最 佳 值 ， 其 值 必须 在 min 属性 值 与 max 属性 值 之 间 ， 可 以 大 于 high 属性 值 

【 例 6.13】 


某 实验 中 学 一 班 在 开学 时 进行 班长 选举 活动 ， 该 班级 有 50 名 同学 ， 每 位 同学 最 多 选 
择 两 票 ， 徐 海 、 陈 露 和 李 雪 三 名 同学 参加 了 这 次 选举 活动 。 下 面 的 代码 通过 meter 元 素 表 
示 这 3 名 同学 的 支持 率 : 


<p> 


徐 海 : <meter low="69" high="80" max="100" optimum="100" value="92">A</meter> 
陈 器 : <meter low="69" high="80" max="100" optimum="100" value="72">C</meter> 
李 雪 : <meter low="69" high="80" max="100" optimum="100" value="52">E</meter> 


</p> 
运行 上 述 代码 观察 效果 ， 如 图 6-8 所 示 。 
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6-8 使 用 meter 元 素 的 初始 效果 


图 6-8 显示 了 meter 元 素 的 默认 样式 ， 如 果 不 使 用 该 元 素 的 默认 样式 ， 开 发 者 也 可 以 
自 定 义 样式 。 例 如 ， 下 面 通过 样式 选择 器 指定 CSS 样式 ， 如 下 代码 仅 适 用 于 WebKit 内 核 
的 浏览 器 : 
.deal meter { -webkit-appearance: none; } 
.deal ::-webkit-meter-bar { 
height: lem; 


background: white; 
border: lpx solid black; 


} 
.deal ::-webkit-meter-optimum-value { background: green; } /* 好 */ 
-deal ::-webkit-meter-suboptimum-value { background: orange; } /x* 凑 合 */ 
-deal ::-webkit-meter-even-less-good-value { background: blue; } /* 糟 糕 */ 
.deal ::-moz-meter-bar { 

background: rgba(0,96,0,.6); 
} 
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为 显示 支持 信息 的 <p> 标 记 添 加 class 属性 ， 代 码 如 下 : 


<p class="deal"> 
<!-- 省 略 其 他 内 容 --> 
</p> 


E 新 运行 页 面 或 者 刷新 浏览 器 页 面 ， 自 定义 效果 如 图 6-9 所 示 。 
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6-9 自 定义 meter 元 素 样式 


6.4.2” progress 元素 


progress 直译 过 来 是 “发 展 、 进 步 、 进 度 ” 的 意思 ， 顾 名 思 义 ，progress 元 素 代 表 一 个 
任务 的 完整 进度 ， 这 个 进度 可 以 是 不 确定 的 ， 只 是 表示 进度 正在 进行 ， 但 是 不 清楚 还 有 多 
少 工作 量 没有 完成 。 可 以 使 用 0 到 某 个 最 大 数 (例如 100) 之 间 的 数值 来 表示 进度 完成 的 准确 
情况 。progress 元 素 具 有 两 个 属性 ， 来 表示 当前 任务 完成 的 情况 : value 属性 表示 已 经 完成 
了 多 少 工作 量 ，max 属性 表示 总 共有 多 少 工作 量 ， 工 作 量 单位 是 随意 的 ， 不 用 指定 。 在 设 
置 属性 时 ，value 属性 和 max 属性 只 能 指定 为 有 效 的 浮 点 数 ，value 属性 的 值 必须 大 于 0， 
且 小 于 或 等 于 max 属性 ，max 属性 的 值 必 须 大 于 0。 

【 例 6.14】 

可 以 使 用 progress 元 素 显 示 JavaScript 中 耗费 时 间 的 函数 的 进度 。 本 示例 通过 两 个 
progress 元 素 进行 演示 ， 第 一 个 progress 元 素 设置 value 和 max 属性 的 值 ， 第 二 个 progress 
元 素 只 设置 max 的 值 ， 并 且 只 在 单 击 按钮 时 控制 进度 条 。 实 现 步骤 如 下 。 

向 HTML 页 面 中 添加 第 一 个 progress 元 素 ， 指 定 该 元 素 的 max 属性 和 value 

属性 。 代 码 如 下 : 


<section> 

<h1>progress 元 素 的 使 用 2</h1> 

<p><progress value="45" max="100"><span>45%</span></progress></p> 
</section> 


ER03 向 HTML 页 面 中 添加 第 二 个 progress 元 素 ， 指 定 该 元 素 的 max 属性 值 ， 然 
后 深 加 一 个 按钮 ， 并 为 该 按钮 添加 onClick 事件 属性 。 代 码 如 下 : 


<section> 
<h1>progress 元 素 的 使 用 2</h1> 
<p> 完 成 百分比 : 
<progress id="p" max="100"><span>0</span>%</progress></p> 
<input type="button" onClick="button click()"” value=" 请 点 击 " /> 
</section> 
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ED 


向 JavaScript 脚本 中 添加 button_click0 函 数 ， 在 该 函数 中 定义 progress 元 素 
的 值 。 当 用 户 单 击 按钮 时 ，progress 元 素 就 会 自动 增长 ， 当 它 的 值 增长 到 100( 即 
progress 元 素 的 max 值 ) 时 ， 就 会 停止 增长 。JavaScript 脚本 代码 如 下 : 
<script type="text/javascript"> 
Var newValue 0; 
function button click(){ 
// 获 取 页 面 中 的 progress 元 素 
var progressBar = 


document .getElementById('p'); 
newValue = 0; // 设 置 newValue 


progressBar.getElementsByTagName ('span') [0] .textContent 
setTimeout ("updateProgress()",500); 
} 


三 07 
function updateProgress (){ 
if(newValue>100){ 
return ; 


} 


Var progressBar = 


progressBar.value 


= newValue; 


progressBar.getElementsByTagName ('span') [0] .textContent=newValue; 
setTimeout ("updateProgress()",500); 
newValuett+; 


document .getElementById('p'); 


} 
</script> 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 图 6-10 和 6-11 分 别 显示 了 Chrome 
浏览 器 和 Firefox 浏览 器 的 初始 效果 。 
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图 6-11 Firefox 浏 览 器 的 初始 效果 
单 击 图 中 的 “请 点 击 ”按钮 查看 效果 ， 图 6-12 和 6-13 分 别 为 Chrome 浏览 


6-10 Chrome 浏览 器 的 初始 效果 


器 和 Firefox 浏览 器 的 效果 。 
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图 6-12 在 Chrome 浏 览 器 中 单 击 按钮 ”图 6-13 在 Firefox 浏 览 器 中 单 击 按钮 


6.4.3 details 元 素 


details 元 素 提供 了 一 种 替代 JavaScript 的 、 将 画面 上 局 部 区 域 进行 展开 或 收缩 的 方 
法 ， 用 于 说 明文 档 或 某 个 细节 信息 的 作用 。<details> 标 记 经 常会 使 用 到 一 个 open 属性 ， 该 
属性 定义 details 是 否 可 见 。 

【 例 6.15】 

本 例 向 页 面 中 分 别 添加 两 个 details 元 素 ， 并 为 第 二 个 details 元 素 指定 open 属性 。 代 
码 如 下 : 


<details> 

&nbsp; &nbsp; gnbsp; gnbsp; gnbsp; gnbsp; 东方 明珠 广播 电视 塔 (the Oriental 
Pearl TV Tower) ， 坐 落 在 中 国 上 海 浦东 新 区 陆家嘴 ， 毗 邻 黄浦 江 ， 与 外 滩 隔 江相望 ， 上 海 国际 
新 闻 中 心 所 在 地 。 东 方 明珠 塔 是 由 上 海 现代 建筑 设计 (集团 ) 有 限 公司 的 江 欢 成 设计 。 塔 高 468 米 。 
</details> 
<details open="open"> 

&nbsp; Enbsp; Enbsp; &nbsp; &nbsp; gnbsp; 埃菲尔 铁塔 (法语: La Tour Eiffel) 是 一 
座 于 1889 年 建成 位 于 法 国 巴黎 战神 广场 上 的 匀 空 结构 铁塔 ， 高 300 米 ， 天 线 高 24 米 ， 总 高 324 
米 。 埃 菲 尔 铁塔 得 名 于 设计 它 的 著名 建筑 师 、 结 构 工程 师 居 斯 塔 夫 。， 埃 菲 尔 。 铁 塔 设计 新 颖 独特 ， 
是 世界 建筑 史上 的 技术 杰作 ， 是 法 国 巴黎 的 重要 景点 和 突出 标志 。 


</details> 


在 浏览 器 中 运行 上 述 代码 ， 观 察 效 果 ， 如 图 6-14 所 示 。 从 图 中 可 以 看 出 ， 为 <details> 
标记 指定 open 属性 后 ， 页 面 在 运行 时 会 自动 展开 显示 内 容 。 
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324 米 。 顽 菲 尔 怕 载 得 名 于 设计 它 的 着 名 建筑 师 、 车 构 工程 师 居 斯 增 去 埃菲尔。 铁塔 设计 新 辐 剖 特 ， 是 世界 建 席 史上 的 技术 杰作 ， 是 法 国 
巴 妆 的 重要 景点 和 突出 标志 。 


6-14 ”details 元 素 的 使 用 


6.4.4” summary 元 素 


观察 上 个 示例 的 代码 和 效果 图 ， 可 以 看 出 ，details 元 素 只 添加 了 显示 的 内 容 ， 并 没有 
为 其 指定 标题 ， 这 时 浏览 器 会 提供 一 个 默认 的 标题 ， 即 “详细 信息 ”， 同 时 提供 一 个 诸如 
上 下 箭头 之 类 的 图 标 ， 单 击 该 图 标 可 以 进行 展开 和 收缩 操作 。 如 果 要 为 detail 元 素 自 定义 
标题 ， 这 时 可 以 使 用 summary 元 素 ， 该 元 素 用 来 定义 details 元 素 的 标题 。 

【 例 6.16】 
重新 更 改 上 个 示例 的 代码 ， 为 每 一 个 details 元 素 指定 标题 。 以 第 一 个 details 元 素 为 
部 分 代码 如 下 : 


<details> 
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<summary> 东 方 明珠 广播 电视 塔 </summary> 
<!-- 省 咯 其 他 内 容 -> 


</details> 


在 浏览 器 中 运行 例 6.16 的 代码 ， 查 看 效果 ， 并 且 单 击 图 中 的 箭头 图 标 进行 展开 和 收缩 
操作 ， 如 图 6-15 所 示 。 


六 通过 summary 元 素 为 det: x 人 


a fie///Dhtmis /element/siteen/index nim] 安 


summary 元 素 指定 details 元 素 的 标题 | 


忆 东方 明 呈 广播 电视 霹 
东方 明珠 广播 电视 卉 《the Oriental Pearl TV Tower) ， 从 落 在 中 国 上 海 浦东 新 区 陆家嘴 ， 葬 邻 黄浦 工 ， 与 外 洪 隔 江相望 ， 上 海 国际 新 
闻 中 心 所 在 地 。 东方 明珠 卉 是 由 上 海 现代 建筑 设计 《集团 ) 有 限 公司 的 江 欢 成 设计 。 增 高 458 米 。 
埃菲尔 铁塔 
埃菲尔 铁塔 (法语 : La Tour Eiffel) 是 一 座 于 1889 年 建成 位 于 ; 
324 米 。 埃菲尔 棱 卉 | 设计 它 的 著名 建 入 师 、 结 构 工程 师 居 斯 卉 夫 
巴黎 的 重要 景点 和 突出 标志 。 


各 战神 广场 上 的 锁 空 结构 铁塔 , 高 300 米 ， 天 线 高 24 米 ， 总 高 
菲 尔 。 棱 卉 设计 新 颖 抽 特 ， 是 世界 建筑 史上 的 技术 赤 作 ， 是 法 国 
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ba HTML 5 中 新 增 了 多 个 交互 元 素 ， 除 了 本 节 介 绍 的 几 个 元 素 外 ，command 
元 素 和 dialog 元 素 都 可 以 看 作 是 交互 元 素 。 但 是 ， 目 前 ， 还 没有 浏览 器 提供 对 它们 的 支 
持 操作 ， 因 此 这 里 不 再 进行 详细 的 介绍 。 


6.5 音频 和 视频 元 素 


作为 最 重要 的 Web 开发 标准 的 下 一 代 ，HTML 5 引起 了 很 多 Web 开发 者 的 关注 。 它 
最 重要 的 一 个 特性 就 是 对 音频 和 视频 的 支持 ， 例 如 构建 音频 可 视 化 ， 在 线 视频 编辑 等 ， 这 
一 突破 为 互联 网 多 媒体 技术 带 来 更 多 的 可 发 展 空间 ， 为 多 媒体 技术 的 可 协同 编辑 提供 了 更 
好 的 平台 。 

本 节 分 别 介绍 HIML 5 中 新 增 的 video 元 素 和 audio 元 素 ， 包 括 这 两 个 元 素 的 属性 ， 
以 及 视频 和 音频 的 显示 操作 等 内 容 。 


(6.5.1 video 元 素 


video 元 素 专门 用 来 播放 网 络 上 的 视频 或 电影 ， 通 过 使 用 该 元 素 ， 可 以 把 指定 的 视频 
数据 直接 嵌入 在 网 页 中 。video 元 素 支持 3 种 常用 的 视频 格式 : Ogg、MPEG 4 和 WebM。 

e@ Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

@ MPEG 4: 带 有 HH.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 。 

@ WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 


1. video 元 素 的 常用 属性 
目前 ， 支 持 HIML 5 的 主流 浏览 器 对 视频 格式 的 支持 有 所 不 同 。video 元 素 的 基本 使 


用 形式 如 下 : 


<video src="URL" width=" 宽 度 " height=" 高 度 "” controls autoplay preload loop 
poster="URL"> 


浏览 器 不 支持 video 元 素 

</video> 

从 上 述 形 式 中 可 以 看 出 ，video 元 素 包 含 src、width、height 和 controls 等 多 个 属性 ， 

下 面 对 这 些 属性 进行 了 说 明 。 

@ src: 指定 媒体 (这 里 指 视频 ) 数 据 的 URL 地 址 。 

@ ”width: video 元 素 的 特有 属性 ， 指 定 视 频 的 宽度 。 

@ ”height: video 元 素 的 特有 属性 ， 指 定 视频 的 高 度 。 

@ controls: 指定 是 否 为 视频 添加 浏览 器 自 带 的 播放 用 的 控制 条 ， 控 制 条 中 具有 播 
放 、 暂 停 等 按钮 。 

@ autoplay: 指定 媒体 (这 里 指 视频 ) 是 否 在 页 面 加 载 后 自动 播放 ， 指 定 该 属性 时 表示 
自动 播放 。 

@ ”preload: 指定 视频 是 否 预 加 载 。 如 果 使 用 预 加 载 的 话 ， 浏 览 器 会 预先 将 视频 数据 


进行 缓冲 ， 这 样 可 以 加 快 播放 的 速度 ， 因 为 播放 时 数据 已 经 预先 缓冲 完毕 。 

preload 属性 包含 3 个 可 选择 的 值 ， 说 明 如 下 。 

4 none: 表示 不 进行 预 加 载 。 

* ”metadata: 表示 只 预 加 载 媒 体 的 元 数据 (媒体 字 节 数 、 第 一 帧 、 播 放 列 表 和 持 
续 时 间 等 )。 

4 anuto: 默认 值 ， 表 示 预 加 载 全 部 视频 。 

loop: 指定 是 否 循环 播放 视频 。 

poster: video 元 素 的 特有 属性 ， 当 视频 不 可 用 时 ， 可 以 使 用 该 属性 向 用 户 展示 一 

幅 替 代用 的 图 片 。 当 视频 不 可 用 时 ， 最 好 使 用 该 属性 ， 以 免 展 示 视 频 的 区 域 中 出 

现 一 片 空白 。 


此 注意 : 无 论 是 本 节 介绍 的 video 元 素 ， 还 是 下 一 节 介绍 的 audio 元 素 ， 它 们 的 属 
性 不 止 本 节 介 绍 的 这 些 ， 但 其 他 属性 没有 这 些 属性 使 用 频繁 ， 因 此 这 里 不 再 对 它们 多 做 


外 络 洒 有 


【 例 6.17】 
本 示例 通过 一 个 详细 的 步骤 向 读者 演示 <video> 标 记 及 其 属性 的 使 用 。 实 现 步骤 如 下 。 
向 HIML 网 页 中 添加 <video> 标 记 ， 并 为 该 标记 指定 controls 属性 和 src 属 


性 。 页 面 代码 如 下 : 


<video controls src="http://www.w3school.com.cn/i/movie.ogg"> 


很 抱歉， 您 当前 使 用 的 浏览 器 不 支持 video 元 素 


</video> 


在 浏览 器 中 运行 上 述 代码 ， 不 同 的 浏览 器 显示 的 效果 可 能 有 所 不 同 ， 图 6-16 


和 6-17 分 别 显示 了 Chrome 浏览 器 和 Firefox 浏览 器 中 的 效果 。 
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© 0 file///D:/htmlS/element/seventeen/index.html 


video 元 素 显 示 视 频 


6-16 Chrome 浏览 器 中 的 效果 6-17 Firefox 浏览 器 中 的 效果 


E 罚 03| 继续 向 上 述 网 页 中 添加 <video> 元 素 的 属性 ， 分 别 通过 width 和 height 设置 
视频 的 宽度 和 高 度 。 代 码 如 下 : 

<video controls src="http://www.w3school.com.cn/i/movie.ogg" width="300" 

height="200"> 
很 抱歉 ， 您 当前 使 用 的 浏览 器 不 支持 video 元 素 

</video> 

重新 运行 上 述 代码 进行 测试 ， 图 6-18 和 6-19 分 别 为 Chrome 浏览 器 和 
Firefox 浏览 器 中 的 效果 。 
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6-18 “Chrome 浏览 器 中 的 效果 6-19 Firefox 浏览 器 中 的 效果 


国事 05| 当 视 频 不 可 用 时 ， 可 以 使 用 poster 属性 设置 一 张 图 片 来 代替 视频 。 为 了 演示 
poster 属性 的 效果 ， 更 改 本 示例 的 代码 ， 指 定 播放 一 个 mp4 文件 。 代 码 如 下 : 


<video controls src="../filelist/video.mp4" width="300" height="200" 
poster="../filelist/error.jpg"> 


很 抱歉 ， 您 当前 使 用 的 浏览 器 不 支持 video 元 素 
</video> 
3 国 玫 06] 重新 在 浏览 器 中 运行 上 述 代 码 ，Chrome 浏览 器 和 Firefox 浏览 器 中 的 效果 如 
7 图 6-20 和 6-21 所 示 。 
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图 6-20 Chrome 浏览 器 中 的 效果 6-21 ”Firefox 浏 览 器 中 的 效果 


观察 图 6-20 和 6-21 可 以 发 现 ，Firefox 浏览 器 不 支持 MP4 格式 的 视频 文件 ， 虽 然 
Chrome 浏览 器 中 也 显示 了 poster 属性 设置 的 图 片 ， 但 是 实际 上 它 已 经 加 载 到 了 视频 文件 ， 
0:29 表示 视频 文件 的 总 播放 时 间 ， 单 击 播放 按钮 时 可 以 自动 播放 。 

2.， video 元 素 的 方法 和 事件 

video 元 素 除 了 包含 属性 外 ， 还 包含 一 系列 的 方法 和 事件 ， 在 上 一 章 介绍 HIML 5 的 
新 增 属 性 时 ， 已 经 介绍 了 与 多 媒体 元 素 有 关 的 事件 属性 ， 因 此 ， 这 里 不 再 对 video 或 者 
audio 元 素 的 事件 进行 详细 介绍 ， 如 果 有 需要 ， 可 以 参考 第 5 章 的 表 5-9。 


@ play0: 使 用 play0 方 法 来 播放 媒体 ， 自 动 将 元 素 的 paused 属性 的 值 变 为 false。 

@ pause(0: 使 用 pause0) 方 法 来 暂停 播放 ， 自 动 将 元 素 的 pause 属性 的 值 变 为 true。 

@ ”load(): 使 用 load0 方 法 来 重新 载 入 媒体 进行 播放 ， 自 动 将 元 素 的 playbackRate 属 
性 值 变 为 defaultPlaybackRate 属性 的 值 ， 自 动 将 元 素 的 error 的 值 变 为 null。 

【 例 6.18】 
本 例 中 ， 用 户 通过 单 击 网 页 中 的 按钮 ， 来 控制 视频 的 播放 和 暂停 功能 ， 播 放 完毕 后 弹 
出 提示 。 实 现 步 又 如 下 。 

E01| 向 HTML 网 页 中 添加 <video> 标 记 ， 并 且 指定 该 标记 的 id 属性 、src 属性 、 
width 属性 和 height 属性 。 代 码 如 下 : 

<video id="videol" src="http://www.w3school.com.cn/i/movie.ogg" 

width="300" height="200"> 
很 抱歉 ， 您 当前 使 用 的 浏览 器 不 支持 video 元 素 

</video> 

国 要 02| 在 video 元 素 之 后 添加 两 个 button 元 素 ， 分 别 控制 视频 的 播放 和 暂停 功能 ， 
并 为 该 按钮 添加 onClick 事件 属性 。 代 码 如 下 : 

<button onClick="play() "> 播放 </button> 

<button onClick="pause () "> 暂停 </button> 


通过 Javascript 脚本 分 别 编写 init0、play0 和 pause0 函 数 ， 其 中 init0 函 数 执 。 “人 
行 初始 化 操作 ，play0 函 数 执行 播放 操作 ，pause0 函 数 执行 暂停 播放 操作 。 函 数 的 。 
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完整 代码 如 下 : 
<script> 
Var video; 
function init(){ 
Video = document .getElementById("videol"); 
// 监 听 视 频 播放 结束 事件 
video.addEventListener ("ended", function(){ 
alert ("播放 结束 "); 
},true); 
// 发 生 错 误 
video.addEventListener ("error",function(){ 
switch(video.error.code){ 
case MediaError.MEDIA ERROR ABORTED: 
alert ("视频 的 下 载 过 程 被 中 止 ") ; 
break; 
case MediaError.MEDIA ERROR NETWORK: 
alert ("网 络 发 生 故 障 ， 视 频 的 下 载 过 程 被 中 止 ") ; 
break; 
case MediaError.MEDIA ERROR DECODE: 
alert ("解码 失败 ") ; 


break; 


case MediaError.MEDIA ERROR SRC NOT SUPPORTED: 
alert ("不 支持 播放 的 视频 格式 ") ; 
break; 
default: 
alert (" 发 生 未 知 错误 ") ; 
} 
},false); 
} 
function play(){ 
video.play(); // 播 放 视频 
} 
function pause(){ 
video.pause (); // 暂 停 播放 
} 
</script> 


在 init0 函 数 中 ， 首 先 获取 网 页 中 的 video 元 素 ， 然 后 为 该 元 素 添 加 两 个 ended 事件 和 
error 事件 ， 在 视频 播放 完毕 和 发 生 错误 时 会 弹出 提示 信息 。 在 play0 函 数 中 ， 调 用 play0 
方法 播放 视频 。 在 pauseO 函 数 中 ， 调 用 pause0 方 法 暂停 播放 。 

国 习 04| 为 页 面 中 的 body 元 素 添加 onload 事件 ， 该 事件 调用 initO 函 数 。 

国 国 05| 在 浏览 器 中 运行 本 示例 ， 查 看 效果 ， 如 图 6-22 显示 了 播放 完毕 后 的 效果 。 

3. 实现 视频 的 兼容 

不 同 的 浏览 器 支持 的 视频 格式 可 能 不 同 ， 例 如 Firefox 浏览 器 不 支持 MP4 格式 的 视 
频 ， 但 是 它 支持 其 他 格式 (例如 Ogg) 的 视频 。 如 果 要 实现 浏览 器 的 兼容 效果 ， 可 以 向 video 
元 素 中 添加 多 个 source 元 素 ，source 元 素 可 以 链接 不 同 的 视频 文件 ， 浏 览 器 按 source 元 素 
的 顺序 检测 指定 的 视频 能 否 播放 ， 如 果 不 能 ， 则 播放 下 一 个 。 
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6-22 ”视频 播放 结束 时 的 效果 


<source> 标 记 常 用 的 3 个 属性 及 其 说 明 如 下 。 
@ src: 用 于 指定 媒体 的 地 址 ， 与 video 元 素 和 audio 元 素 的 src 一 样 。 
@ type: 用 于 说 明 src 属性 指定 媒体 文件 的 类 型 ， 帮 助 播 放 器 判断 要 播放 的 媒体 内 容 


的 类 型 。 

e@ media; 用 于 说 明 媒 体 在 何 种 介质 中 使 用 ， 不 设置 时 默认 值 为 all， 表 示 支 持 所 有 
介质 。 

【 例 6.19】 


向 video 元 素 中 嵌入 多 个 source 元 素 ， 实 现 浏览 器 的 兼容 效果 。 代 码 如 下 : 


<video width="300" height="200" controls autoplay> 
<source src="../filelist/test.mp4" type="video/mp4" /> 
<source src="../filelist/test.webm" type="video/webm" /> 
<source src="../filelist/test.o0gg" type="video/ogg" /> 
</video> 


重新 在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 。 


6.5.2 _ audio 元素 


audio 元 素 专门 用 来 播放 网 络 上 的 音频 数据 。audio 元 素 的 大 多 数 属性 都 与 video 元 素 
相同 ， 但 是 需要 注意 的 是 : audio 元 素 不 能 通过 width 和 height 属性 设置 音频 播放 器 的 宽度 
和 高 度 ， 如 果 要 设置 ， 需 要 通过 CSS 样式 指定 。 另 外 ，audio 元 素 也 没有 poster 属性 ， 不 
能 通过 指定 该 属性 显示 一 张 图 。 

在 通过 CSS 样式 设置 播放 器 的 宽度 和 高 度 时 ， 宽 度 可 以 任意 进行 调整 ， 但 是 高 度 最 好 
不 要 小 于 45px。 如 果 高 度 大 于 45px 时 ， 并 不 会 改变 播放 控件 的 高 度 ， 但 它 会 在 播放 控件 
上 增加 空白 单位 ; 一 旦 小 于 45px， 那 么 就 会 只 显示 播放 和 暂停 控件 。 

【 例 6.20】 
本 例 通过 一 个 详细 的 步骤 向 读者 演示 <audio> 标 记 及 其 属性 的 使 用 。 
向 HIML 网 页 中 添加 <audio> 标 记 ， 并 且 为 该 标记 指定 src 属性 和 controls 属 
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6-24 ”Firefox 浏 览 器 中 的 效果 


性 。 代 码 如 下 : 
<audio src="../filelist/wheretime.mp3" controls> 
当前 浏览 器 不 支持 audio 元 素 
</audio> 
分 别 在 Chrome 浏览 器 和 Firefox 浏览 器 中 运行 上 述 代码 ， 其 效果 如 图 6-23 
和 6-24 所 示 。 
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图 6-23 Chrome 浏览 器 中 的 效果 
分 别 单 击 图 6-23 和 6-24 中 的 播放 按钮 ， 来 播放 音频 文件 ， 播 放 时 的 效果 如 


图 6-25 和 6-26 所 示 。 
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audio 元 素 显示 视频 
已 播放 时 间 
Urry 一 一 一 一 于 时 


图 6-25 ”Chrome 浏览 器 中 播放 文件 图 6-26 ”Firefox 浏 览 器 中 播放 文件 


步骤 四 向 <audio> 标 记 添 加 autoplay 属性 、loop 属性 和 preload 属性 ， 然 后 运行 浏览 


器 进行 测试 。 
通过 CSS 样式 设置 <audio> 标 记 的 宽度 和 高 度 ， 然 后 运行 浏览 器 进行 测试 。 


步 强 划 
audio 元 素 与 video 元 素 一 样 ， 可 以 通过 向 audio 元 素 中 嵌入 多 个 source 元 素 的 方式 实 


现 浏 览 器 的 兼容 效果 。 
【 例 6.21】 
向 audio 元 素 中 贬 入 两 个 source 元 素 ， 这 两 个 source 元 素 分 别 播放 .mp3 和 .ogg 格式 的 


音频 文件 ， 并 且 需 要 为 播放 器 定义 统一 的 宽度 和 高 度 。 代 码 如 下 : 
<audio controls style="width:400px; height:45px;"> 
<source src="../filelist/wheretime.mp3" type="audio/mpeg" /> 
="../filelist/wheretime.ogg" type="audio/ogg" /> 


<source src= 
</audio> 


3 192 


上 党 注意 : audio 元 素 的 绝 大 多 数 属性 都 与 video 元 素 一 样 ， 不 同 的 属性 本 节 开 始 已 经 
介绍 过 。 另 外 ，audio 元 素 也 包含 一 系列 的 方法 和 事件 ， 这 些 方法 和 事件 都 与 video 元 素 
一 致 。 读 者 可 以 在 上 述 示例 的 基础 上 添加 新 的 代码 ， 练 习 使 用 audio 元 素 的 方法 和 事件 。 


6.6 标准 属性 


上 一 章 在 介绍 HTML 5 中 的 新 增 标准 属性 时 ， 提 到 过 多 个 标准 属性 ， 这 些 标准 属性 可 
以 对 任何 元 素 使 用 ( 极 特别 的 元 素 除 外 )， 本 节 向 读者 介绍 一 些 常用 的 标准 属性 。 


66; hidden 属 性 


hidden 是 HTML 5 新 增 的 一 个 属性 ， 该 属性 类 似 于 hidden 类 型 的 input 元 素 ， 功 能 是 
通知 浏览 器 不 显示 该 元 素 ， 使 元 素 处 于 不 可 见 状态 。 但 是 元 素 中 的 内 容 还 是 浏览 器 创建 
的 ， 也 就 是 页 面 装 载 后 允许 使 用 JavaScript 脚本 将 该 属性 取消 ， 取 消 后 该 元 素 变 为 可 见 状 
态 ， 同 时 元 素 中 的 内 容 也 即时 显示 出 来 。hidden 属性 是 一 个 布尔 值 的 属性 ， 当 将 属性 值 设 
置 为 tue 时 ， 元 素 处 于 不 可 见 状态 ， 当 属性 值 设置 为 false 时 ， 元 素 处 于 可 见 状态 。 

【 例 6.22】 

本 示例 通过 p 元 素 显 示 一 段 文 本 ， 并 且 通 过 hidden 属性 将 这 段 文本 进行 隐藏 ， 当 用 户 
单 击 页 面 中 的 按钮 时 可 以 再 次 显示 这 段 内 容 。 实 现 步骤 如 下 。 

向 HTML 网 页 的 合适 位 置 添加 <p> 标 记 ， 并 指定 该 标记 的 hidden 属性 。 部 

分 代码 如 下 : 
<input type="button" id="btn" value=" 显 示 " onClick="show()" /> 
<p hidden id="showp"> 

&nbsp; &nbsp; gnbsp; gnbsp; gnbsp; gnbsp; Happiness is not about being 
immortal nor having food or rights in one's hand. It's about having each 
tiny wish come true, or having something to eat when you are hungry or 
having someone's love when you need love. 

</p> 

欧洲 02| 添加 一 段 JavaScript 脚本 ， 脚 本 内 容 用 于 显示 或 者 隐藏 p 元 素 中 指定 的 内 

容 。 代 码 如 下 : 

坟 SCEJp 七 > 

var btn = document.getElementByYId ("btn") 

function show(){ 

var p = document .getElementById ("showp") 
if (btn.value == "显示 "){ 


btn.value = "隐藏"; 
Pp-hidden = false; 


}elsef{ 
btn.value = "显示 "; 
P-hidden = true; 


DN 
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</script> 
在 浏览 器 中 运行 本 示例 的 代码 进行 测试 ， 图 6-27 为 显示 内 容 时 的 效果 。 
“0 


er C 
© © fle///D:/htmlS/element/twenty.two/index html 三 


hidden 属 性 的 使 用 
| 


|、 但 生 订 让 Timaden 拓 性 沪 记 信 枯 了 。 各 和 用 独活 ， 间 过 生生 所 。 机 大 二 丰 村 要 ， 愉 梧 避 江 人 及 
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6.6.2 ”contenteditable 属 性 


contenteditable 属性 的 功能 是 允许 用 户 编辑 元 素 中 的 内 容 ， 因 此 需要 注意 ， 元 素 必须 是 
可 以 获得 鼠标 焦点 的 元 素 ， 而 且 在 点 击 鼠 标 后 要 向 用 户 提供 一 个 插入 符号 ， 提 示 用 户 该 元 
素 中 的 内 容 允 许 编 辑 。contenteditable 属性 与 hidden 属性 一 样 ， 它 也 是 一 个 布尔 值 ， 可 以 
将 该 属性 的 值 设置 为 tue 或 false。contenteditable 属性 有 一 个 隐藏 的 inherit( 继 承 ) 状 态 ， 属 
性 值 为 true 时 ， 元 素 被 指定 为 允许 编辑 ， 属 性 值 为 false 时 ， 元 素 被 指定 为 不 允许 编辑 ; 
如 果 没 有 指定 true 或 false， 则 由 inherit 状态 来 决定 ， 如 果 元 素 的 父 元 素 是 可 编辑 的 ， 则 该 
元 素 就 是 可 编辑 的 ， 否 则 为 不 可 编辑 。 

另外 ， 除 了 contenteditable 属性 外 ， 元 素 还 具有 一 个 iscontenteditable 属性 ， 当 元 素 可 
编辑 时 ， 属 性 值 为 tue， 当 元 素 不 可 编辑 时 ， 属 性 值 为 false。 

【 例 6.23】 

下 面 通 过 <p> 标 记 显示 一 段 文本 ， 并 且 将 该 标记 contenteditable 属性 的 值 设置 为 true。 
代码 如 下 : 

<p contenteditable="true"> 

&nbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; Happiness is not about being 
immortal nor having food or rights in one's hand. It's about having each 


tiny wish come true, or having something to eat when you are hungry or 
having someone's love when you need love. </p> 


在 浏览 器 中 运行 上 述 代 码 ， 在 网 页 中 点 击 这 段 文字 并 进行 编辑 ， 图 6-28 和 6-29 分 别 
显示 了 Chrome 浏览 器 和 Opera 浏览 器 的 效果 。 


cortertednable 
© OD file///D/htmlS/element/twenty_three/index html = 
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6-28 Chrome 浏览 器 的 编辑 效果 


及 contenteditable 尾 性 的 会 x | 二 


CB 


contenteditable 属 性 的 使 用 
下 面 这 段 话 可 以 进行 编辑 ， 快 未 点 击 编辑 吧 ! 


out having each tiny wish come true, 
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6-29 Opera 浏览 器 的 编辑 效果 


6.6.3 spellcheck 属 性 


spellcheck 属性 是 HTML 5 针对 input 元 素 (type=text) 与 textarea 这 两 个 文本 输入 框 提供 
的 一 个 新 属性 ， 其 功能 是 对 用 户 输入 的 文本 内 容 进行 拼写 和 语法 检查 。spellcheck 属性 的 
值 是 一 个 布尔 类 型 ， 它 在 书写 时 必须 将 属性 值 设置 为 tue 或 者 false。 


此 注意 ， 如 果 为 元 素 指定 readOnly 属性 或 者 disabled 属性 ， 并 且 将 属性 值 设置 为 
true 时 ， 即 使 设置 了 spellcheck 属性 也 不 会 执行 拼写 检查 。 


【 例 6.24】 
本 示例 演示 spellcheck 属性 的 使 用 ， 为 了 演示 该 属性 值 的 效果 ， 向 页 面 中 添加 两 个 
textarea 元 素 ， 分 别 指定 spellcheck 属性 的 值 为 tue 和 false。 代 码 如 下 : 


spellcheck 属性 值 为 true: <br/><textarea row="10" cols="100" 
spellcheck="true"></textarea><br/> 

spellcheck 属性 值 为 false: <br/><textarea row="10" cols="100" 
spellcheck="false"></textarea> 


在 浏览 器 中 运行 本 示例 的 代码 ， 并 输入 内 容 进行 测试 ， 图 6-30 为 Opera 浏览 器 的 测试 
效果 。 


二 els i 
用 spellcheck 时 性 的 使用。 x | 二 


spellcheck 属 性 的 使 用 
pelheck 必 性 值 为 rue: 


工 bag an seg. 
4 四 
spellcheck 属 性 值 为 false: 
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6.7 ”实战 一 一 使 用 HTML 5 元 素 构 建 网 页 


在 本 节 之 前 ， 已 经 介绍 过 HIML 5 中 新 增 的 结构 元 素 、 分 组 元 素 、 文 本 语义 元 素 、 交 
互 元 素 、 音 频 和 视频 元 素 ， 以 及 常用 的 标准 属性 等 多 个 内 容 。 本 节 实 战 将 前 面 的 知识 点 结 
合 起 来 构建 一 个 网 页 ， 最 终 的 构建 效果 如 图 6-31 所 示 。 


成 里。 店 小 针 的 爱心 小 屋 


我 的 青春 我 做 主 节 选 ) 
看 《我 的 青春 谁 例 主 》 的 感人 
要 凡人 过 的 再 春 埋 铀 主 》 


文字 ， 我 将 心情 交 


2014 年 3 月 18 日 


6-31 ”实战 运行 效果 


从 图 6-31 中 可 以 看 到 ， 本 次 实战 构建 的 网 页 非常 简单 ， 在 添加 内 容 之 前 ， 首 先 分 析 网 
页 结构 。 页 面 最 外 层 通 过 一 个 div 元 素 进行 控制 ， 它 包含 4 部 分 : 头 部 信息 、 导 航 链接 、 
文章 节选 列表 以 及 底部 信息 。 
根据 上 述 的 部 分 内 容 添 加 代码 进行 实现 ， 完 整 的 实现 步骤 如 下 所 示 。 
国 妇 01| 页 面 头 部 的 内 容 很 简单 ， 只 包含 一 张 背 景 图 和 5 个 超 链接 。 页 面 代码 如 下 : 
<header class=" 
<div id="mylogo"><img src="img/logo.jpg" alt=" 村 "> 
<h1> 唐 小 轩 的 爱心 小 屋 </h1> 
</div> 
<div id="iconNav" class="clearfix"> 


clearfix"> 


<ul class="clearfix"> 
<1i class="about"><a href="#about"> 关 于 我 </a></1i> 
<1i class="emailme"><a href="#contact"> 联 系 我 </a></1i> 


N 


国 轨 02| 为 上 述 代码 中 的 header、div 和 uu、li 等 元 素 添加 CSS 样式 ， 这 里 只 给 出 
header 元 素 的 样式 。 代 码 如 下 : 


header { 
position: relative; 
background-color: #422f2c; 
height: 130px; 
background-image: url(../img/headerBg.gif); 
background-repeat: repeat-x; 
color: #fff» 


人 

; 。 ; 第 

<li class="goodies"><a href="#goodies"> 文 章 列表 </a></1i> 0 
<1i class="links"><a href="#1links"> 收 藏 内 容 </a></1i> 竟 
<1i class="awards"><a href="#awards"> 相 册 </a></1i> 时 
</ul> 刁 
</div> 三 
</header> a 
快 

速 

入 

门 


} 
区 为 03| 添加 一 系列 的 导航 链接 ， 导 航 链接 的 外 侧 通过 nav 元 素 进行 控制 ， 在 该 元 素 
中 再 嵌入 一 个 无 序列 表 。 页 面 代码 如 下 : 


<nav class="clearfix"> 
<ul class="clearfix"> 
<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 文 章 精 选 </a></1i> 
<1i><a href="#"> 相 册 列 表 </a></1i> 
<1i><a href="#"> 内 容 收藏 </a></1i> 
<1i><a href="#"> 心 情 列表 </a></1i> 
<1i><a href="#"> 联 系 我 吧 </a></1i> 


</ul> 
</nav> 
为 上 个 步骤 中 的 nav 元 素 添加 CSS 样式 ， 代 码 如 下 : 
nav { 


background-image: url(../img/navBg.gif); 
background-repeat: repeat; 
background-color: #f4f9f8; 
} 
继续 添加 与 中 间 内 容 有 关 的 代码 ， 中 间 部 分 通过 article 元 素 进行 控制 ， 然 后 
在 该 元 素 中 包含 多 个 section 元 素 ， 每 一 个 section 元 素 又 包含 标题 和 内 容 等 。 基 
本 结构 如 下 : 
<article class="clearfix"> 
<div id="web" class="clearfix"> 
<h1> 精 选 文章 </h1> 
<section></section> 
<section></section> 


</div> 
</article> 


为 上 步 中 的 article 元 素 添加 CSS 样式， 指定 padding 属性 的 值 。 代 码 如 下 


人 人 只 
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article { 
padding: 0 25px; 
} 


国 嫌 07| 以 第 一 个 section 为 例 进行 介绍 ， 向 该 元 素 中 嵌入 header 元 素 ， 它 包含 主 标 
题 和 副标题 两 部 分 ， 因 此 ， 将 两 个 标题 放 到 hgroup 元 素 中 。 代 码 如 下 : 


<header class="test"> 
<hgroup class="test1"> 
<h1> 我 的 青春 我 做 主 (节选 )</h1> 
<h2> 看 《我 的 青春 谁 做 主 》 的 感悟 </h2> 
</hgroup> 
</header> 


重新 为 上 个 步骤 中 header 元 素 、hgroup 元 素 和 hl 元 素 等 设置 CSS 样式 。 以 
hl 元 素 为 例 ， 相 关 代码 如 下 : 


hgroup hl{ 
background-color: white; 
background-image: none; 
position: inherit; 
width: auto; 
height: auto; 
left: Opx; 
padding: Opx Opx Opx Opx; 
color: #000; 


| 
继续 在 上 个 步骤 的 基础 上 添加 代码 ， 使 用 p 元 素 显示 文章 节选 的 段落 内 容 ， 
如 果 内 容 过 多 ， 则 通过 details 元 素 表 示 ， 将 剩 下 的 内 容 收 起 来 。 以 Details 元 素 
为 例 ， 代 码 如 下 : 
<details> 
<summary> 读 取 更 多 </summary> 
<p>&nbsp; &nbsp; gnbsp; gnbsp; gnbsp; &gnbsp; 赵 青 楚 ， 那 么 的 理智 ， 部 么 的 头脑 清 
晰 ， 令 人 羡慕 啊 。 我 自 认 为 很 理智 但 是 不 够 头脑 清晰 ， 往 往 犯 糊涂 ， 但 是 大 致 方向 是 理智 的 。 人 不 
可 以 太 理智 ， 该 感情 用 事 的 时 候 也 要 感性 一 些 ， 和 否则 自己 会 后 悔 的 。 喜 欢 他 对 爱情 的 态度 ， 那 么 清 
楚 又 那么 投入 。 我 知道 现实 生活 中 可 能 没有 这 样 完美 的 人 ， 但 是 ， 电 视 剧 源 于 生活 却 高 于 生活 。 虽 
然 很 难 做 到 但 是 我 们 要 那个 方向 去 努力 。</p> 
</details> 


国 妇 10| 通过 figure 元 素 显示 一 段 独立 的 视频 文件 ， 并 且 通 过 figcaption 元 素 指定 标 
题 。 显 示 视频 使 用 video 元 素 ， 并 向 该 元 素 中 嵌入 多 个 source 元 素 。 代 码 如 下 : 


<figure> 
<figcaption> 第 一 集 视频 第 一 部 分 观看 </figcaption> 
<video controls width="300" height="200" loop> 
<source src="01.mp4" type="video/mp4" /> 
<source src="01.webm" type="video/webm" /> 
</video> 
</figure> 


完善 第 二 个 section 元 素 中 的 内 容 ， 具 体 的 代码 和 CSS 样式 不 再 显示 。 
通过 footer 元 素 控 制 底部 内 容 ， 在 网 页 底部 显示 了 版 权 和 友情 链接 等 内 容 。 


CO 


勾 
第 
代码 如 下 : a 
草 
<footer class="clearfix"> 法 
<p>Copyright (c) 2014 abc. <a href="#contact" 局 
title="Send me a message">Contact me</a>.</p> 三 
<ul> a 
<li><a href="#" title="Validate my CSS">CSS</a></1i> 快 
<li><a href="#" title="Validate my XHTML">XHTML</a></1i> 3 
<1i class="printerFriendly"> 和 
<img src="img/printerFriendly.gif"> 
</l4> 
</ul> 
<p class="thanks"> 
Thanks to: <a href="#">Baidu</a>, <a href="#">Google</a> 
</p> 
</footer> 
多 罚 13| 为 上 个 步骤 中 的 元 素 设置 样式 ，footer 元 素 的 样式 代码 如 下 : 
footer { 
position: relative; 
background-color: #2aldlb; 
color: #705758; 
padding: 10px 0 10px 0; 
font-size: 75%; 
text-transform: uppercase; 
background-image: url(../img/footerBg.gif); 
background-repeat: repeat-x; 
background-position: bottom; 
border-top: 3px solid #5a353b; 
} 
步 善 网 页 中 的 其 他 内 容 和 样式 ， 网 页 代码 和 样式 代码 不 再 给 出 。 
区 有 罚 15| 在 浏览 器 中 运行 网 页 ， 查 看 效果 ， 最 终 效果 可 以 参考 图 6-31。 
3 
6.8 本 章 习 题 
1. 填空 题 
(1) HTML 5 中 新 增 的 元 素 用 于 定义 文档 的 页 眉 信 息 。 
(2) 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。 
(3) figcaption 元 素 用 于 定义 元 素 的 标题 。 
(4) time 元 素 有 两 个 常用 属性 ， 它 们 分 别 是 属性 和 pubdate 属性 。 
(5) details 元 素 提 供 了 一 种 替代 JavaScript 的 、 将 画面 上 局 部 区 域 进行 展开 或 收缩 的 
方法 ， 它 需要 通过 元 素来 设置 标题 。 
2. 选择 题 
(D 元 素 代表 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 、 可 以 独自 被 外 部 NS 
引用 的 内 容 。 号 
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A. article B. section C. aside D. figcaption 
(2) 下 面 关于 nav 元 素 的 说 法 ， 选 项 是 不 正确 的 。 
A. nav 元 素 可 以 作为 传统 的 导航 条 
B. nav 元 素 可 用 于 侧 边 栏 导航 
C.， menu 元 素 和 footer 元 素 都 可 以 用 来 替换 nav 元 素 
D. 页 内 导航 和 翻 页 操作 时 都 可 以 使 用 nav 元 素 
(3) 在 显示 一 篇 文章 时 ， 这 篇 文章 有 两 个 标题 ， 一 个 主 标题 ， 一 个 子 标题 ， 最 好 将 这 


两 个 标题 放 在 元 素 下 。 
A. aside B. hgroup C. meter D. details 
(4) progress 元 素 常用 的 两 个 属性 是 
A. min 和 max B. low 和 high 
C. value 和 min D. value 和 max 
(5) 下 面 4 个 属性 中 ， 是 audio 元 素 的 属性 。 
A. poster B. controls C. width D. height 


(6) HTML 5 中 新 增 了 一 个 属性 ， 该 属性 允许 用 户 编辑 元 素 中 的 内 容 。 
A. spellcheck B. contextmenu C. contenteditable D. hidden 


3. 上 机 练习 


根据 效果 图 构建 网 页 。 如 图 6-32 所 示 为 一 个 网 页 效果 ， 页 面包 含 头 部 、 中 间 区 域 和 底 
部 3 个 模块 ， 其 中 头 部 又 包含 主 标题 、 副 标题 和 导航 链接 。 读 者 需要 根据 6-32 的 效果 来 设 
计 网 页 ， 在 合适 的 位 置 插 入 本 章 介绍 的 元 素 。 


花样 年 华 小 博客 


最 新 文章 首页 博客 列表 精美 收藏 联系 我 取 


人 作者 : 正三 ) PS 用 人 示 


pe 347 9) ee 
每 一 次 都 在 徘 入 单 中 坚强 ， 每 一 次 就 臣 很 受伤 也 不 从 溪 光 ， 我 逢 我 一 丰 有 双 隐 形 的 起 膀 ， 芝 我 飞 ， 飞 过 绝望 。 
成 长， 是 最 艰难 美好 的 事情 ， 这 是 我 听 到 关于 或 长 最 令 我 项 意 的 概括 。 成 上 钛 如 太 草 出 氏 一 般 ， 经历 一 短 病 著 的 挣扎 ， 重 获 最 美的 新 


曾经 的 我 却 是 一 个 害怕 成 长 的 孩子 ， 习 人 慌 了 躲 在 妈妈 身后 让 妈妈 承受 所 有 的 痛苦， 习惯 了 被 苍 双 疼 着 要 着 不 知道 白 独 是 什么 滋味 ， 习 
情 了 朋友 们 围绕 在 身边 昭 疗 我 * 可 是 ， 无 论 堆 者 不 能 像 童 笑 里 的 那个 永远 也 长 不 大 的 孩子 一 样 ， 未 运 被 别人 疼 ， 视 别人 昭 昭 而 不 知道 去 
关心 别人 * 在 到 过 温 宝 里 的 花 休 在 春风 里 枯萎 ， 听 到 过 竺 中 的 鸟 儿 在 树林 中 铁 死 ， 那 葛 想 着 一 帆 风 顺 的 少年 经 历 卷 苦难 ， 那 唱 着 "不想 长 
大 "的 孩子 渐 新 成 熟 。 时 间 一 点 一 点 的 积累 ， 我 发 现 拓 交 成 长 其 实 是 一 件 和 常 不 负责 任 的 事情 ， 未 远 教 个 小 污 子 如 同 只 情 壳 职 不 尾 付 出 的 
人 一 样 可 怕 。 


位 条 评论 ”mo Nore 


> 多 Qs 图 6-32 ”网 页 的 效果 
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HTML 5 新 型 表单 的 使 用 


HTML 表单 可 以 用 来 在 网 页 上 显示 特定 的 信息 。 网 站 管理 者 要 实现 与 浏览 
者 之 间 的 沟通 ， 就 必须 借助 于 表单 这 个 桥梁 。 表 单 通常 的 应 用 是 用 户 注 册 、 调 查 
表 、 搜 索 界 面 等 。HTML 5 与 HIML 4 相 比 ， 在 表单 方面 进行 了 改进 ， 不 仅 增加 
了 与 表单 有 关 的 元 素 ， 还 增加 了 与 表单 和 表单 域 有 关 的 输入 类 型 ， 本 章 将 介绍 
EIML 5 新 型 表单 的 使 用 。 在 介绍 HTML 5 的 新 增 内 容 之 前 ， 会 首先 了 解 一 个 
HTML 5 中 的 表单 内 容 。 

通过 末 章 的 学 习 ， 读 者 不 仅 可 以 热 悉 表 单 的 基本 结构 ， 还 可 以 掌握 HIML 5 
中 新 增 的 元 素 、 局 医 和 答 广 关 型 JohagEd 使 用 SHTML 表单 的 内 容 ， 熟 练 地 构 
建国 PML 页 面 。 

本 章 学 习 目 标 : 

了 解 表单 设计 时 遵循 的 原则 及 表单 的 基本 结构 
掌握 datalist 元 素 的 使 用 
了 解 keygen 元 素 的 使 用 
熟悉 output 元 素 的 使 用 
掌握 新 增 的 输入 类 型 的 使 用 
熟悉 新 增 的 两 个 表单 属性 
掌握 新 增 的 与 input 元 素 有 关 的 属性 
熟练 使 用 元 素 、 类 型 和 属性 构建 网 页 


ieeeeeee 
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7.1 了 解 表 单 


表单 可 以 用 来 在 网 页 上 显示 特定 的 信息 ， 但 主要 还 是 用 来 收集 来 自用 户 的 信息 ， 并 将 
收集 的 信息 发 送 给 服务 器 端 处 理 程序 处 理 。 可 以 说 ， 表 单 是 客户 端 和 服务 器 端 沟通 的 桥 
梁 ， 是 实现 用 户 与 服务 器 互动 的 最 主要 的 方式 。 本 节 首 先 了 解 和 回顾 表单 的 基础 知识 ， 包 
括 表单 的 设计 原则 和 基本 结构 等 多 个 内 容 。 


C11 表单 概述 


Web 开发 者 经 常会 提 到 网 页 表单 ， 他 们 通常 所 说 的 “表单 ”就 是 指 HTML 表单 ， 一 
个 HTML 表单 是 HTML 文档 的 一 部 分 ，HTML 文档 可 以 包含 正常 的 内 容 (例如 标题 、 文 字 
和 列表 等 )， 也 可 以 包含 可 视 元 素 (例如 文本 框 、 密 码 框 和 下 拉 框 等 )。 
一 个 好 的 表单 可 以 为 Web 开发 者 节省 许多 工作 ， 如 下 3 点 列 出 了 设计 表单 时 需要 注意 
的 原则 : 
e@ ”尽量 使 用 下 拉 列 表 供用 户 进行 选择 ， 因 为 列表 容易 使 用 ， 信 息 也 容易 处 理 。 
@ ”如 果 不 能 以 列表 形式 提供 ， 那 么 尽量 让 用 户 输入 少量 文本 ， 这 样 只 需要 花费 少量 
的 时 间 ， 用 户 易于 接受 ， 提 供 的 数据 也 容易 进行 处 理 。 
@ 只 有 在 必要 时 才 要 求 用 户 输入 大 量 文本 ， 因 为 大 量 的 文本 将 花费 用 户 很 多 的 时 间 
去 填写 ， 也 将 花费 更 多 的 时 间 去 处 理 。 一 般 情 况 下 ， 用 户 是 不 愿意 填写 这 么 多 信 
息 的 。 
目前 ， 表 单 的 交互 功能 表现 在 多 个 方面 : 输入 单行 文本 、 输 入 多 行文 本 、 输 入 密码 ， 
从 下 拉 列 表 中 进行 单项 选择 ， 从 各 列 项 中 选择 一 项 或 者 多 项 ， 提 交 或 者 取消 操作 等 。 例 
如 ， 在 图 7-1 中 显示 了 一 个 网 页 的 注册 页 面 ， 该 页 面 的 注册 信息 通过 表单 来 实现 。 


一 一 [=e 
EE ET 
3 CC Dwwwxcar.com.cn/register/ 安 | 豆 
1 填写 基本 注册 信息 了 激活 注册 信箱 3 完成 注册 
用 户 名: 
型 录 密 码 : 
衫 认 : 
电子 邮件 : 
所 在 地 区 ， 选择 省 从 ”| 选择 城市 | 
性 中 : 生男 9 妇 ee 
立即 注册 
亏 去 立即 主 册 代表 您 已 经 认识 网 让 开 司 意 妥 卡 气 车 89 必 用 户 服 务 协 议和 丸 隐 守 权 再 且 办 


7-1 用 户 注册 页 面 


C72 表单 的 基本 结构 


表单 是 一 个 包含 表单 元 素 的 区 域 ， 在 网 页 中 负责 数据 采集 功能 。 一 个 表单 有 3 个 基本 
组 成 部 分 一 一 表单 元 素 、 表 单 域 和 表单 按钮 。 
@ ”表单 元 素 : 这 里 面包 含 了 处 理 表 单数 据 所 用 CGI 程序 的 URL 以 及 数据 提交 到 服 
务 器 的 方法 。 
@ ”表单 域 , 包含 了 文本 框 、 密 码 框 、 多 行文 本 框 、 隐 藏 框 、 复 选 框 、 单 选 按钮 以 及 
下 拉 选 择 框 和 文件 上 传 框 等 。 
@ ”表单 按钮 :包括 提交 按钮 、 取 消 按钮 和 一 般 按钮 ， 用 于 将 数据 传送 到 服务 器 上 或 
者 取消 输入 ， 还 可 以 用 表单 按钮 来 控制 其 他 定义 了 处 理 脚本 的 处 理工 作 。 
表单 使 用 form 元 素 进行 定义 ， 它 是 允许 用 户 在 表单 中 (例如 文本 框 、 下 拉 列 表 和 复 选 
框 等 ) 输 入 信息 的 元 素 。 在 表单 中 可 以 添加 表单 域 和 表单 按钮 ， 基 本 格式 如 下 : 


<form action="" enctype="" method="" name="" onsubmit="" onreset=""> 
<!-- 添加 表单 域 和 表单 按钮 --> 

</form> 

<form> 标 记 中 可 以 包含 多 个 元 素 ， 上 述 格式 只 是 列 出 了 几 种 常用 属性 ， 表 7-1 对 这 些 


常用 属性 进行 了 说 明 。 
表 7-1 <form> 标 记 的 常用 属性 


属性 名 称 说 明 
action 必需 属性 ， 用 来 指定 当 表 单 提 交 时 要 采取 的 动作 。 该 属性 值 一 般 是 要 对 表单 数据 
进行 处 理 的 相关 程序 地 址 ， 也 可 以 是 收集 表单 数据 的 E-mail 地 址 ， 该 URL 所 指向 
的 服务 器 并 不 一 定 要 与 包含 表单 的 网 页 是 同一 服务 器 ， 可 以 是 位 于 任何 另外 地 方 
的 一 台 服 务 器 ， 只 要 给 出 绝对 URL 地 址 即 可 


enctype 设置 表单 数据 的 内 容 类 型 

method 定义 数据 传送 到 服务 器 的 方式 ， 其 常用 值 包括 get( 默 认 值 ) 和 post 
name 定义 表单 的 名 称 

onsubmit 主要 是 针对 submit 按钮 来 说 的 ， 执 行 提交 操作 

onreset 主要 是 针对 reset 按钮 来 说 的 ， 执 行 取消 操作 


可 以 向 form 元 素 中 添加 表单 域 和 表单 按钮 ， 这 些 信 息 主要 是 通过 input 元 素 实 现 的 ， 
而 且 需 要 设置 该 元 素 的 type 属性 ， 该 属性 的 值 决 定 了 不 同 的 表单 元 素 。 下 面 来 回顾 一 下 
input 元 素 type 属性 的 取 值 ， 这 些 取 值 及 其 说 明 如 表 7-2 所 示 。 


表 7-2 <input> 标 记 的 type 属性 值 


type 取 值 效果 图 


text 单行 输入 框 1 性 什 


password 密码 输入 框 > 


洛 祝 号 乙 洲 册 举 9 1NLH 志江 忆 


NN 


type 取 值 说 明 效果 
hidden 隐藏 文本 框 不 显示 
file 表示 一 个 文件 框 ， 由 一 个 单行 文本 框 和 一 个 | 正 浏 览 器 : 到 
“浏览 ”按钮 组 成 Chrome 浏览 器 :| 短文 人 | 未 这 择 文件 
checkbox 复 选 杠 
Tadio 单 选 按钮 
image 表示 插入 一 个 图 像 ， 作 为 图 形 按钮 9 
Submit 提交 按钮 ， 将 把 数据 发 送 到 服务 器 Ea 
reset 表示 重 置 按钮 ， 将 重 置 表单 数据 ， 以 便 重新 输入 | [本 
button 普通 按钮 EE 


7.2 表单 元 素 


HTML 5 新 增 了 3 种 与 表单 有 关 的 元 素 ， 这 些 元 素 分 别 是 datalist、keygen 和 output， 
下 面 将 分 别 对 这 3 种 元 素 进 行 介绍 。 


( 7.2.1 datalist 元 素 


datalist 元 素 定 义 输入 框 的 选项 列表 ， 列 表 通 过 datalist 内 的 option 元 素 进 行 创建 。 它 
通常 与 input 元 素 配 合 使 用 ， 来 定义 input 可 能 的 取 值 。 在 使 用 <datalis 忆 标记 时 ， 需 要 通过 
id 属性 为 其 指定 一 个 唯一 的 标识 ， 然 后 为 input 元 素 指定 list 属性 ， 将 该 属性 值 设置 为 
datalist 元 素 对 应 的 id 属性 值 即 可 。 

【 例 7.1】 

本 例 将 input 元 素 和 datalist 元 素 结合 ， 完 成 用 户 的 输入 。 为 了 演示 datalist 元 素 实现 的 
效果 ， 首 先 向 网 页 中 添加 以 下 代码 : 

<form action="#" method="post"> 

<table> 
六 二 开关 
<td align="right"> 用 户 名 : </td><td><input type="text" ></td> 
A 
Er 
<td align="right"> 密 码 : </td><td><input type="password"></td> 
</tr> 
<tr> 
<td colspan="2" align="center"> 
<input type="submit" value=" 登 录 " /> 
&nbsp; gnbsp; gnbsp; gnbsp; <input type="reset" /></td> 
</tr> 
</table> 
</form> 


在 上 述 代码 中 ， 为 表单 元 素 添 加 了 三 行 两 列 的 表格 元 素 ， 其 中 前 两 行 向 用 户 提供 用 户 
名 和 密码 ， 最 后 一 行 提供 操作 信息 。 在 浏览 器 中 运行 上 述 代码 进行 测试 ， 点 击 用户 名 输入 
框 ， 此 时 没有 任何 效果 ， 如 图 7-2 所 示 。 


沁 许 要 要 浊 悦 业 SANLH 机 了 小 驴 


用 户 登 录 | 
a | 了 IT 
#9 

| [i 


7-2 ”用 户 登录 页 面 


重新 更 改 上 述 代 码 ， 向 表单 中 添加 datalist 元 素 列表 ， 并 且 将 其 绑 定 到 用 户 名 所 在 的 
input 元 素 。 代 码 如 下 : 
<input type="text" list="namelist"> 
<datalist id="namelist"> 
<option>admin</option> 
<option>lucy</option> 
<option>FoverMe</option> 
</datalist> 


重新 运行 上 述 代码 ， 观 察 datalist 元 素 的 效果 ， 如 图 7-3 所 示 。 在 该 图 所 示 的 界面 中 ， 
用 户 可 以 手动 输入 用 户 名 ， 也 可 以 选择 提供 的 用 户 名 。 


3 = 3 mcs) 
7 daie 雪 > 
3 © DfileyVWD:htmls/formtest/firsthtml 


用 户 登录 


7-3 datalist 元 素 的 效果 


7.2.2 ”keygen 元 素 


keygen 元 素 是 密 钥 生成 器 ， 作 用 是 提供 一 种 验证 用 户 的 可 靠 方法 。 当 提交 表单 时 会 生 
成 两 个 键 ， 一 个 是 私 钥 ， 它 存储 在 客户 端 ， 一 个 是 公 钥 ， 它 被 发 送 到 服务 器 。 其 中 ， 公 钥 
可 用 于 验证 用 户 的 客户 端 证 书 。 py 
<keygen> 标 记 可 以 使 用 多 个 属性 ， 常 用 属性 及 其 说 明 如 表 7-3 所 示 。 CAS 


205 ce 天 


和 天 
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表 7-3 <keygen> 标 记 的 常用 属性 


属性 名 称 说 明 
autofocus 使 keygen 字段 在 页 面 加 载 时 获得 焦点 
challenge 如 果 使 用 ， 则 将 keygen 的 值 设置 为 在 提交 时 间 
disabled 禁用 keytag 字段 
form 定义 该 keygen 字段 所 属 的 一 个 或 者 多 个 表单 
keytype 定义 keytype。rsa 生成 RSA 密 钥 
name 定义 keygen 元 素 的 唯一 名 称 。name 属性 用 于 在 提交 表单 时 搜集 字段 的 值 
【 例 7.2】 


继续 在 上 个 示例 的 基础 上 添加 代码 ， 演 示 keygen 元 素 的 使 用 。 相 关 代码 如 下 : 
<keygen name="security"></keygen> 
在 浏览 器 中 运行 上 述 代 码 ， 查 看 效果 ， 如 图 7-4 所 示 。 
[= | © le 
keygen 元 素 
© DD file///D:/html5/formtest/second.html 三 


用 户 名 : 


密码 密 : [2048《〈 井 唱 度 ) ”下 
联系 电话 : | 1024 《中 等 强度 ) 


图 7-4 ” keygen 元素 的 使 用 


(7.2.3 ”output 元 素 


output 元 素 用 于 不 同类 型 的 输出 ， 例 如 脚本 输出 。<output> 标 记 的 常用 属性 有 3 个 ， 
说 明 如 下 。 

@ for: 定义 输出 域 相 关 的 一 个 或 者 多 个 元 素 。 

e@ form: 定义 输入 字段 所 属 的 一 个 或 者 多 个 表单 。 

@ name: 定义 对 象 的 唯一 名 称 (表单 提交 时 使 用 )。 

【 例 7.3】 

通常 情况 下 ， 会 将 output 元 素 与 JavaScript 脚本 结合 使 用 。 一 般 步 骤 如 下 。 

国 轨 01| 向 HTML 网 页 中 添加 表单 ， 在 表单 中 添加 两 行 两 列 的 表格 ， 第 一 行 用 于 输 
出 23+12 的 结果 ， 第 二 行 用 于 执行 操作 。 部 分 代码 如 下 : 
<form action="first.html" method="post"> 

<table width="300" height="100" align="center"> 


<caption><h1>output 元 素 </h1></caption> 
<tr> 


| SS 一 
从 这 


= 206 


= 


多 

第 

<td align="right"> -~ 

结果 : </td><td>23+12=<output name="result"/></td> 章 

</tr> 二 

过 七 开关 -| 
<td colspan="2" align="center"> 请 

<input type="button" onClick="javascript:GetResult()" a 
value=" 计 算 " /></td> 新 

</E 型 

正之 表 
</table> 单 
</form> 的 
使 

用 


从 上 述 代码 中 可 以 看 出 ， 通 过 output 元 素 输出 结果 ， 并 且 为 操作 按钮 添加 
了 onClick 事件 属性 ， 当 单 击 按钮 时 ， 会 调用 GetResult0 脚 本 函数 。 该 函数 的 代 
码 如 下 : 

<script> 
function GetResult (){ 

Var form = document.forms[0]; 


form['result'] .value = 25; 
event .preventDefault (); 


} 
</script> 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 。 


7.3 输入 类 型 


HTML 5 中 新 增 的 输入 类 型 为 用 户 提供 了 更 好 的 输入 控制 和 数据 验证 ， 本 节 将 介绍 这 
些 新 增 的 输入 类 型 。 


31 email 类 型 


email 类 型 用 于 应 该 包含 E-mail 地 址 的 输入 文本 框 ， 该 文本 框 与 其 他 文本 框 在 页 面 显 
示 时 没有 区 别 ， 专 门 用 于 接收 E-mail 地 址 信息 。 在 提交 表单 时 ， 会 自动 验证 文本 框 中 的 内 
容 是 否 符合 E-mail 邮件 地 址 格式 ， 如 果 不 符合 ， 将 提示 相应 的 错误 信息 。 


Ne 无 论 是 本 节 介 绍 的 email 类 型 ， 还 是 后 面 几 节 介 绍 的 其 他 类 型 ， 它 们 都 不 
会 自动 验证 输入 框 是 否 为 空 ， 而 是 在 不 为 空 的 情况 下 验证 用 户 输 入 的 内 容 是 否 符合 标 
准 。 简 单 地 说 ， 只 有 在 输入 框 的 内 容 不 为 空 时 ， 这 些 类 型 的 输入 框 才 会 执行 验证 功能 。 
【 例 7.4】 
目前 ， 许 多 网 站 要 求 在 用 户 注 册 时 输入 有 效 的 电子 邮箱 ， 这 时 可 以 直接 将 input 元 素 
的 type 属性 值 指定 为 email。 例 如 ， 直 接 向 表单 元 素 中 添加 一 个 email 类 型 的 input 元 素 和 
提交 按钮 ， 页 面 代码 如 下 : 


<form action="#" method="get"> > S| 
发 件 人 : <input type="email" name="frommail" /><br/> 


207 (= YW 入 


©@ rm 5 与 CSS 3 网 页 设计 入 门 与 提高 


<input type="submit" value=" 提 交 " /> 
</form> 


在 浏览 器 中 运行 上 述 代 码 并 向 页 面 中 输入 内 容 进 行 测试 ， 不 同 的 浏览 器 可 能 导致 效果 
有 所 不 同 。 例 如 ， 图 7-5 和 7-6 分 别 为 Chrome 浏览 器 和 Firefox 浏览 器 中 的 效果 。 


EE [el 
Demat * 回国 x*|+| 
© | filey//Di/htmls/formtest/fourhtml 安 三 | € @iNDO7C 国 -5P| 加 |- 四 - 会 人 - 
发 件 人 myform | 发 件 人 : [ayfors 
EE 四 ee 
i 请 入 电子 部 件 地 址 . 
生 @” 
图 7-5 Chrome 浏览 器 中 的 效果 图 7-6 Firefox 浏 览 器 中 的 效果 


Ea, 在 某 些 情况 下 ， 并 不 只 是 要 求 用 户 输入 一 个 电子 邮箱 ， 如 果 用 户 存在 多 个 
邮箱 ， 那 么 可 以 允许 用 户 输入 多 个 。 将 邮箱 地 址 输入 框 的 multiple 属性 的 值 设 置 为 true 
时 ， > 


(32 url 类 型 


url 类 型 用 于 应 该 包含 绝对 URL 地 址 的 输入 框 。 在 提交 表单 时 ， 会 自动 验证 用 户 输入 
url 文本 框 中 的 值 ， 如 果 输 入 的 值 不 合 规则 ， 不 允许 提交 ， 并 且 会 有 提示 信息 。url 类 型 的 
输入 框 适用 于 多 种 情况 ， 例 如 个 人 主页 、 百 度 地 址 和 博客 地 址 等 。 
【 例 7.5】 
url 类 型 与 email 类 型 的 使 用 方式 一 样 ， 如 下 为 url 的 基本 使 用 代码 : 
<form action="#" method="get"> 
博客 主页 : <input type="url" /><br/> 
<input type="submit" value=" 提 交 " /> 
</form> 
在 浏览 器 中 运行 上 述 代码 并 输入 内 容 进行 测试 ， 图 7-7 和 7-8 分 别 为 Chrome 浏览 器 和 
Firefox 浏览 器 中 的 效果 。 


-== CC [= © 
/Dur 时 | Denman x|+ 
€ 3 © 0 file///D:/htmls/formtest/five.html € @iehmO rc 国 -BP Ol- -会 -1 


博客 主页 。 [baidu com| 
EE 到 回 请 铂 入 网 址 . 


图 7-7 Chrome 浏 览 器 图 7-8 Firefox 浏 览 器 


不 同 的 浏览 器 对 url 类 型 的 输入 框 的 要 求 有 所 不 同 ， 例 如 ， 在 图 7-7 和 7-8 所 示 的 浏览 
器 中 ， 要 求 用 户 必须 输入 完整 的 URL 地址， 并 且 人 允许 地 址 前 有 空格 的 存在 。 


(3.3 number 类 型 


number 类 型 用 于 包含 数字 的 输入 框 。 在 提交 表单 时 ， 会 自动 检查 该 输入 框 的 内 容 是 否 
为 数字 。 当 使 用 的 浏览 器 不 支持 number 类 型 时 ， 会 自动 显示 为 一 个 普通 的 输入 框 。 
【 例 7.6】 
例如 ， 直 接 向 页 面 中 添加 number 类 型 的 input 元 素 。 代 码 如 下 : 
<form action="#" method="get"> 
您 的 年 龄 : <input type="number" value="20" /><br/> 
<input type="submit" value=" 提 交 " /> 
</form> 
在 浏览 器 中 运行 上 述 代码 ， 如 图 7-9 和 7-10 所 示 分 别 为 Chrome 浏览 器 和 Opera 浏览 
器 中 的 显示 效果 。 


Es [Vo er 
站 number 半 型 we 及 number 关 型 x 
Ba > © |[[ file///D/htmls/formtest/six.html 六 三 | | fae///Dv/trnes /eorrmtat 
| 您 的 年 龄 ， [四 有 您 的 年 的 ， 园 上 
[ 替 交 E33 
7-9 ” Chrome 浏览 器 中 的 效果 7-10 Opera 浏览 器 中 的 效果 


如 果 可 以 向 输入 框 中 手动 输入 数值 ， 也 可 以 点 击 输入 框 的 数值 按钮 进行 控制 。 如 果 用 
户 输入 的 值 不 合法 ， 则 会 进行 验证 ， 如 图 7-11 和 7-12 所 示 为 验证 时 的 效果 。 


六 number 关 型 x 
[< © 日 fileVVDVhtmls/formtestsixhtml 


您 的 年 龄 。 [ZoHelid 5 


| 加 请 注入 一 个 数字 


图 7-11 Chrome 浏 览 器 验证 7-12 Opera 浏览 器 验证 


number 类 型 的 输入 框 能 够 设置 对 所 接受 的 数字 的 限定 ， 除 了 value 属性 外 ， 还 可 以 和 
其 他 的 属性 结合 使 用 ， 这 些 属性 的 说 明 如 下 所 示 。 

emax: 指定 输入 框 可 以 接受 的 最 大 的 输入 值 。 

e ”min: 指定 输入 框 可 以 接受 的 最 小 的 输入 值 。 

®@ step: 输入 域 合 法 的 间隔 ， 如 果 不 设 团 ， 默 认 值 是 1。 
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【 例 7.7】 
重新 对 上 个 示例 中 的 内 容 进 行 更 改 ， 分 别 设置 min、max 和 step 属性 的 值 。 页 面 代码 
如 下 : 


<form action="#" method="get"> 
您 的 年 龄 : <input type="number" value="20" min="10" max="110" step="5" /> 


<br/> 
<input type="submit" value=" 提 交 " /> 
</form> 
在 浏览 器 中 运行 上 述 代 码 ， 选 择 数 值 按 钮 或 者 输入 内 容 进行 测试 ， 运 行 效果 如 图 7-13 
和 7-14 所 示 。 
ee > lx”| 
A 下 | | > 医 
镶 【a BT/ Dhtmis /formtest/seven hemi 空 三 | 二 CE | the//Dhtinis /formnest siverihtinl | 
你 的 年 准 ， 世 一 回 ee 
区 到 回信 必须 大 于 或 等 于 10。 be EE 
图 7-13 Chrome 浏览 器 测试 效果 图 7-14 Opera 浏览 器 单 击 数值 按钮 


(3.4 range 类 型 


range 类 型 用 于 应 该 包含 一 定 范围 内 数值 的 输入 范围 ， 并 且 也 可 以 设 定 对 所 接受 值 的 
限定 。 它 的 常用 属性 与 number 类 型 一 样 ， 通 过 min 属性 和 max 属性 ， 可 以 设置 最 小 值 与 
最 大 值 (默认 值 分 别 为 0 和 100)， 通 过 step 属性 指定 每 次 拖 动 的 步 幅 。 

【 例 7.8】 

如 下 代码 显示 了 range 类 型 的 input 元 素 的 使 用 ， 并 且 为 其 指定 min、max 和 step 属性 
的 值 。 相关 步骤 如 下 。 

创建 HTML 网 页 ， 并 向 该 页 面 中 分 别 添加 range 类 型 和 text 类 型 的 input 

元 素 ， 前 者 指定 输入 范围， 后 者 显示 前 一 个 输入 框 的 值 。 相 关内 容 如 下 : 
<form action="#" method="get"> 
价格 范围 : 
<input type="range" min="10" max="100" step="5" name="price" 
onChange="GetValue()"/><br/> 


<input type="text" name="checkvalue" disabled readonly /> 
</form> 


步骤 [ED 添加 GetValue0 函 数 的 脚本 代码 ， 在 这 段 代码 中 设置 name 属性 值 是 
checkvalue 的 输入 框 。 代 码 如 下 : 


<script> 
function GetValue ()1{ 
Var form = document.forms[0]; 
form[ "checkvalue '] .value= form['price'] .value; 


</script> 

如 果 浏览 器 不 支持 range 类 型 ， 那 么 会 在 页 面 中 显示 一 个 普通 输入 框 。 在 
支持 range 类 型 的 浏览 器 中 ，range 类 型 的 输入 框 通常 以 滑动 条 的 方式 进行 值 的 指 
定 。 例 如 ， 图 7-15 和 7-16 分 别 为 Chrome 浏览 器 和 Firefox 浏览 器 中 的 效果 。 


DD ranges 型 x Ea: I 回国 xx 区 
| ¢€ 3 G 0 file///D/ntmls/formtest/eighthtml 地 | 三 € @ie/D OrC| 国 -5P| Or Or- 会 9 |- 1 
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50 70 
7-15 ”Chrome 浏览 器 中 的 效果 7-16 ” Firefox 浏览 器 中 的 效果 


(EE datepickers 类 型 


datepickers 类 型 是 指 日 期 类 型 ，HTML 中 提供 了 多 个 可 供 选取 日 期 和 时 间 的 新 输入 类 
型 ， 用 于 验证 输入 的 日 期 。 
表 7-4 对 HTML 5 中 新 增 的 日 期 和 时 间 输 入 类 型 做 了 具体 的 说 明 。 


表 7-4 HTML 5 中 新 增 的 日 期 和 时 间 类 型 


日 期 和 时 间 类 型 说 明 
date 选取 日 、 月 、 年 
month 选取 月 、 年 
Week 选取 周 和 年 
time 选取 时 间 ( 小 时 和 分 钟 ) 
datetime 选取 时 间 、 日 、 月 、 年 (UTC 时 间 ) 
datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 


如 果 浏 览 器 不 支持 表 7-4 中 列举 的 日 期 和 时 间 类 型 ， 那 么 该 类 型 的 输入 框 在 网 页 中 显 
示 为 一 个 普通 输入 框 。 

【 例 7.9】 

向 HTML 网 页 中 添加 多 个 input 元 素 ， 分 别 指定 这 些 元 素 的 type 属性 值 ， 将 其 指定 为 
表 7-4 中 的 类 型 。 页 面 代码 如 下 : 


<form action="#" method="get"> 
<table height="150" width="450"> 

< 
<td><input type="date" /></td> 
<td><input type="month" /></td> 

</Er> 

<tr> 
<td><input type="week" /></td> 
<td><input type="time" /></td> 

AEE 
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<tr> 
<td><input type="datetime" /></td> 
<td><input type="datetime-local" /></td> 
< EP 
</table> 
</form> 


在 浏览 器 中 运行 上 述 代码 ， 观 察 效果 ， 图 7-17 和 7-18 分 别 展示 了 Chrome 浏览 器 和 
Opera 浏览 器 的 效果 。 
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图 7-17 Chrome 浏 览 器 的 初始 效果 图 7-18 Opera 浏 览 器 鼠标 悬浮 效果 


用 户 可 以 向 输入 框 中 输入 内 容 ， 也 可 以 单 击 输入 框 之 后 的 按钮 进行 选择 ， 图 7-19 为 
Chrome 浏览 器 选择 年 、 月 、 日 时 的 效果 ， 图 7-20 为 Opera 浏览 器 选择 年 和 周 的 效果 。 
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图 7-19 ”选择 年 、 月 、 日 图 7-20 选择 年 和 周 


(3.6 search 类 型 


search 类 型 是 一 种 专门 用 于 输入 搜索 关键 词 的 输入 框 ， 它 能 自动 记 住 一 些 字符 ， 例 如 
站 点 搜索 或 者 Google 搜索 。 如 果 浏 览 器 不 支持 search 输入 类 型 ， 那 么 会 在 网 页 中 显示 为 
一 个 普通 输入 框 ; 如 果 浏 览 器 支持 search 输入 类 型 ， 在 用 户 输入 内 容 后， 会 在 右 侧 附带 一 
个 删除 图 标的 按钮 ， 单 击 这 个 图 标 按钮 可 以 快速 清除 内 容 。 

【 例 7.10】 


向 HIML 表单 元 素 中 添加 一 个 search 类 型 的 输入 框 和 一 个 提交 按钮 。 页 面 代 码 如 下 : 


N 


侣 

第 

<form action="#" method="get"> 3 

<input type="search" name="searchinfo" /> 

<input type="submit" vaule=" 提 交 " /> 

</form> 三 

户 

在 浏览 器 中 运行 本 示例 ， 图 7-21 为 Chrome 浏览 器 运行 时 的 初始 效果 ， 图 7-22 为 输入 新 

内 容 时 的 效果 。 EE 

oe 
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(3.7 color 类 型 


color 类 型 用 于 实现 一 个 RGB 颜色 输入 ， 其 基本 形式 是 梳 RGGBB， 默 认 值 是 
#000000。 如 果 浏 览 器 支持 color 类 型 ， 那 么 会 向 用 户 提供 一 个 颜色 选取 器 ， 用 户 在 单 击 时 
能 够 弹出 一 个 颜色 选 盘 供 其 选择 。 如 果 浏 览 器 不 支持 color 类 型 ， 那 么 会 自动 地 在 网 页 中 
显示 为 一 个 普通 输入 框 。 

【 例 7.11】 

向 HTML 网 页 中 添加 两 个 color 输入 类 型 的 input 元 素 ， 第 一 个 输入 元 素 使 用 默认 的 
value 值 ， 第 二 个 重新 指定 value 属性 值 ， 然 后 添加 一 个 提交 按钮 。 页 面 代码 如 下 : 

<form action="#" method="get"> 

<input name="colorl" type="color" /> 
<input name="color2" type="color" value="#FF3E96" /> 
<input type="submit" value=" 提 交 " /> 

</form> 

在 浏览 器 中 运行 上 述 代码 ， 图 7-23 为 Chrome 浏览 器 支持 color 输入 类 型 的 效果 ， 而 
图 7-24 为 Firefox 浏览 器 不 支持 color 类 型 时 的 效果 。 
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图 7-23 Chrome 浏览 器 中 的 效果 图 7-24 Firefox 浏览 器 不 支持 


在 支持 color 输入 类 型 的 Chrome 浏览 器 中 ， 直 接 单 击 颜色 ， 弹 出 如 图 7-25 所 示 的 颜 
色 选 取 器 。 在 颜色 选取 器 中 ， 用 户 可 以 选择 图 中 左 侧 的 基本 颜色 ， 也 可 以 在 右 侧 提供 的 颜 
色 中 进行 选择 ， 选 择 后 单 击 “ 添 加 到 自 定义 颜色 ”按钮 ， 这 时 会 在 自 定 义 颜 色 中 显示 自 定 h Ss 
义 的 颜色 ， 如 图 7-26 所 示 。 CN] 
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(3.8 tel 类 型 


tel 类 型 用 于 从 语义 上 实现 一 个 电话 号 码 的 输入 ， 但 是 电话 号 码 的 格式 千差万别 ， 很 难 
实现 一 个 通用 的 格式 。 因 此 ，tel 类 型 通常 会 和 pattern 属性 配合 使 用 ，pattem 属性 的 详细 
内 容 会 在 7.4.2 节 进 行 介绍 。 

【 例 7.12】 

向 HTML 网 页 添加 表示 手机 号 码 的 tel 输入 类 型 ， 并 通过 pattem 属性 指定 电话 号 码 的 
格式 。 代 码 如 下 : 

<form action="#" method="get"> 

手机 号 码 :; <input name="telphone" type="tel" pattern="^\d{11}$" /> 


<input type="submit" value=" 提 交 " /> 
</form> 


在 浏览 器 中 运行 上 述 代码 ， 向 页 面 输入 内 容 进 行 测试 ， 图 7-27 和 7-28 分 别 为 Chrome 
浏览 器 和 Firefox 浏览 器 的 测试 效果 。 


-| rete | LE 一 
te 并 型 x\ Ss 问世 二 加 一 
€ 3 G 0 filey///D/htmls/formtest/twelve htmlztt 三 | 人 JewwG@Trc| 画 -5p| Ol 四 有 H+. 
和 8 [| Flsa [ES ] [天 二 可 
回 埋 己 所 请 求 的 从 式 屏 持 一 致 | WE 
图 7-27 Chrome 浏览 器 中 的 效果 图 7-28 Firefox 浏览 器 中 的 效果 


7.4 表单 属性 


HIML 5 中 新 增 了 一 系列 与 表单 有 关 的 属性 ， 本 节 将 介绍 HTML 5 中 的 新 增 属性 ， 首 
先 介绍 表单 的 新 增 属性 ， 接 着 再 介绍 与 表单 的 input 元 素 有 关 的 新 增 属性 。 


41 表单 属性 
简单 地 说 ， 表 单 属性 就 是 与 form 元 素 有 关 的 属性 。HTML 5 中 新 增 的 、 与 表单 有 关 的 


DN 


两 个 表单 属性 是 autocomplete 属性 和 novalidate 属性 。 
1.，autocomplete 属 性 


atuocomplete 属性 指定 所 有 的 表单 控件 是 否 应 该 拥有 自动 完成 功能 。 该 属性 的 值 包含 
on 和 off: 如 果 将 属性 值 指定 为 on， 那 么 表示 执行 自动 完成 功能 ， 如 果 将 属性 值 指定 为 
off， 那 么 表示 关闭 自动 完成 功能 。 
【 例 7.13】 
为 页 面 中 的 <form> 标 记 指定 autocomplete 属性 ， 并 且 将 该 属性 的 值 指定 为 on， 然 后 向 
表单 中 添加 两 个 输入 框 和 一 个 按钮 。 页 面 代码 如 下 : 
<form id="formOne" autocomplete="on"> 
用 户 名 : <input type="text" id="autoFirst" name="autoFirst"/><br/><br/> 
昵 &nbsp; gnbsp; gnbsp; 称 : <input type="text" id="autoSecond" 


name="autoSecond" /><br/><br/> 
<input type="submit" value=" 提 交 " /> 
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</form> 
向 页 面 中 输入 内 容 ， 进 行 提交 ， 测 试 时 的 效果 如 图 7-29 和 7-30 所 示 。 
ex™| EE [= /5 lm 
] 口 form 元 素 的 autocomple x \\ ] form 元 素 的 autocomple| x 
€ 3C Dfile///D/htmls/formtest/thirteen.html to 三 | < @ 1 file///D:/html5/formtest/thirteen.html 安 
用 户 名 : | Rt 
admin mt: | 
昵 种 殉 呈 RB admin 
[| Ed] | 堪 交 | chenfeng 
| sm ; 
rr 
图 7-29 用 户 名 自动 完成 的 效果 图 7-30 ”昵称 自动 完成 的 效果 


浏览 器 的 不 同 可 能 会 导致 显示 autocomplete 属性 的 效果 会 有 所 不 同 ， 图 7-31 和 7-32 
分 别 显 示 了 Firefox 浏览 器 和 Opera 浏览 器 的 效果 。 


Er ” 巨 E 下 寺 | [VD op" [= | © le 
国 | tomaovtocompleiE x |B formsindeutocomplet, x Ed 


所 团 fileWiD: 回 CB 


用 户 名 : | ] 
zhufeng 
7-31 ”Firefox 浏览 器 的 效果 图 7-32 Opera 浏览 器 的 效果 


autocomplete 属性 不 仅 可 以 用 于 form 元 素 ， 还 可 以 用 于 所 有 类 型 的 input 元 素 。 可 以 
外 新 更 改 例 7.13 中 的 代码 ， 将 提供 用 户 输入 “昵称 ”的 文本 框 的 autocomplete 属性 的 值 设 
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置 为 off。 这 时 页 面 代码 如 下 : 


<form id="formOne" autocomplete="on"> 
用 户 名 : <input type="text" id="autoFirst" name="autoFirst"/><br/><br/> 
上 昵 &nbsp; gnbsp; gnbsp; 称 : <input type="text" autocomplete="off" 
id="autoSecond" name= "autoSecond" /><br/><br/> 
<input type="submit" value=" 提 交 " /> 
</form> 


在 上 述 代 码 中 ， 为 <form> 标 记 指 定 autocomplete 属性 的 值 为 on， 这 表示 form 元 素 中 
的 两 个 输入 框 都 实现 了 自动 完成 功能 。 同 时 ， 又 为 “昵称 ”输入 框 指定 了 autocomplete 属 
性 ， 并 且 该 属性 的 值 为 off， 这 表示 该 输入 框 不 开启 自动 完成 功能 。 
重新 在 浏览 器 中 运行 上 述 代码 进行 测试 ， 观 察 autocomplete 属性 的 实现 效果 ， 图 7-33 
和 7-34 分 别 为 两 个 输入 框 的 效果 。 从 这 两 个 图 中 可 以 发 现 ，“ 用 户 名 ”输入 框 依旧 会 实现 
自动 完成 功能 ， 而 “昵称 ”输入 框 关闭 了 自动 完成 功能 。 


下 


二 一 回回 一 一 
) form 元 素 的 autocomple x form 元 素 eautocomple x 可 
| < © [file///D:/html5/formtest/thirteen.html 家 三 | € © Dfie///D:/htmlS/formtest/thirteen.html 空 三 | 
用 户 名 : 加 ] | 有 Pa: ladmn 
admin 
昵称 : 已 昌 称 kk _ 工 
提交 | 提交 
7-33 “用 户 名 ”输入 框 自动 完成 7-34 “昵称 ”输入 框 关闭 了 自动 完成 


贱 技巧 : 各 个 浏览 器 对 autocomplete 属性 支持 的 列表 个 数 有 差异 ， 例 如 Google 浏览 
器 和 Opera 浏览 器 记忆 前 6 个 ， 按 输入 顺序 先后 显示 ， 超 出 之 后 按照 输入 值 提 交 的 次 数 
降序 排列 6 个 。Firefox 浏览 器 自动 完成 列表 数据 的 个 数 没有 限制 ， 按 提交 的 先后 顺序 ， 


超出 则 滚动 显示 。 

无 论 是 form 元 素 还 是 多 个 类 型 的 input 元素， 都 可 以 使 用 autocomplete 属性 ， 使 用 该 
属性 时 的 注意 事项 如 下 : 

@ input 元 素 应 该 位 于 form 表单 中 ， 并 且 应 该 含有 submit 提交 按钮 ， 要 指定 name 


@ 默认 情况 下 ，text 类 型 的 input 元素 含有 autocomplete 为 on 的 属性 ， 如 果 要 取消 
自动 完成 ， 那 么 需要 将 autocomplete 指定 为 off。 

浏览 器 自动 记忆 的 值 为 已 提交 的 值 ， 并 且 这 些 值 的 顺序 为 提交 的 先后 顺序 。 
浏览 器 自动 记忆 的 值 ， 是 以 标记 的 name 属性 为 标准 的 ， 也 就 是 说 ， 如 果 表 单 中 
的 input 标记 有 相同 的 name， 那 么 就 有 相同 的 自动 完成 列表 (与 是 否 在 同一 个 
form 中 和 是 否 在 同一 个 网 页 中 无 关 )。 

自动 完成 列表 信息 没有 存放 在 浏览 器 缓存 中 。 


2. novalidate 属 性 


novalidate 属性 指定 在 提交 表单 时 不 对 表单 进行 有 效 的 检查 。 为 表单 设置 该 属性 时 ， 可 
以 关闭 整个 表单 验证 ， 这 样 可 以 使 form 内 的 所 有 表单 控件 不 进行 验证 。 简 单 地 说 ， 
novalidate 属性 用 于 取消 表单 验证 。 

除了 指定 form 元 素 的 novalidate 属性 取消 验证 外 ， 还 有 一 种 取消 验证 的 方法 ， 即 利用 
input 元 素 的 formnovalidate 属性 ， 这 样 可 以 控制 单个 表单 控件 的 验证 。 利 用 input 元 素 的 
formnovalidate 属性 可 以 让 表单 验证 对 单个 input 元 素 失效 ， 例 如 ， 表 单 的 第 二 部 分 需要 验 
证 的 内 容 数量 很 少时 ， 可 以 通过 这 种 方法 为 submit 类 型 的 按钮 指定 formnovalidate 属性 ， 
在 用 户 单 击 按钮 时 ， 相 当 于 利用 form 元 素 的 novalidate 属性 ， 这 会 导致 整个 表单 都 失效 。 


(42 input 属 性 


HTML 5 中 提供 了 一 系列 与 input 元 素 有 关 的 属性 ， 为 input 元 素 指定 这 些 属性 可 以 实 
现 不 同 的 功能 。 具 体 来 说 ，HTML 5 新 增 的 与 input 元 素 有 关 的 属性 包括 autocomplete 属 
性 、autofocus 属性 、form 属性 、 表 单 重 写 属性 (formaction、formenctype、formmethod、 
formnovalidate 和 formtarget)、width 和 height 属性 、list 属性 、min、max 和 step 属性 、 
multiple 属性 、pattern 属性 、placeholder 属性 以 及 required 属性 。 

在 上 述 属 性 中 ， 有 些 属性 在 前 面 已 经 提 到 并 使 用 过 ， 例 如 autocomplete 属性 、list 属 
性 、 以 及 min、max 和 step 属性 。 下 面 介绍 几 种 常用 的 新 增 属性 。 


1.，autofocus 属 性 


autofocus 属性 指定 页 面 加载 后 是 否 自动 获取 焦点 ， 一 个 页 面 上 只 能 有 一 个 元 素 指定 
autofocus 属性 。autofocus 属性 适用 于 所 有 类 型 的 <input> 标 记 ， 该 属性 的 值 是 一 个 布尔 
值 ， 将 标记 的 属性 值 指定 为 tue 时 ， 表 示 页 面 加 载 完毕 后 会 自动 获取 该 焦点 。 

【 例 7.14】 

在 例 7.13 的 基础 上 进行 更 改 ， 为 提供 用 户 输入 的 “昵称 ”文本 框 指定 autofocus 属 
性 。 代 码 如 下 : 


了 昵 snbsp; gnbsp; gnbsp; 称 : 
<input type="text" autocomplete="off" id="autoSecond" name="autoSecond" 
autofocus="true" /> 


在 浏览 器 中 运行 页 面 ， 查 看 效果 ， 初 始 效果 如 图 7-35 所 示 。 从 该 图 中 可 以 看 出 ， 页 面 
加 载 完毕 后 直接 将 焦点 放 到 “昵称 ”输入 框 中 。 

2. multiple 属 性 

multiple 属性 指定 输入 框 可 以 选择 多 个 值 ， 该 属性 适用 于 email 和 file 类 型 的 <inpu 忆 标 
记 。multiple 属性 用 于 email 类 型 的 <input> 标 记 时 ， 表 示 可 以 向 文本 框 中 输入 多 个 E-mail 
地 址 ， 多 个 地 址 之 间 通 过 去 号 进行 分 隔 ; multiple 属性 用 于 file 类 型 的 <input> 标 记 时 ， 表 
示 可 以 选择 多 个 文件 。 
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(=.9 
) 让 autofocus 尾 性 * a 
€ SC Dfile///D/htmls/formtest/fourteen.html 灾 三 
ee a 


7-35 ”autofocus 属 性 的 使 用 


【 例 7.15】 
本 示例 演示 email 类 型 和 file 类 型 的 <input> 标 记 的 multiple 属性 的 使 用 。 基 本 实现 步 
又 如 下 。 
多 出 01| 向 HIML 页 面 中 添加 两 个 <inpuf> 标 记 ， 分 别 指定 该 标记 的 type 属性 为 
email 和 file。 代 码 如 下 : 
<form id="formOne"> 
电子 邮箱 : <input type="email" name="myemail"/>&nbsp; &nbsp; (如 果 电 子 邮 箱 
有 多 个 ， 请 使 用 逗号 进行 分 隔 ) <br/><br/> 
上 传 照 片 : <input type="file" name="selfile" /><br/><br/> 
<input type="submit" value=" 提 交 " /> 
</form> 
在 浏览 器 中 运行 上 述 页 面 ， 查 看 效果 ， 如 图 7-36 所 示 为 输入 多 个 电子 邮箱 
地 址 时 的 效果 。 


OC = 
所 CD fiev/DVhtml5/formtesVfifteen html 2 至 
3 


地 于 所 渍 : |; 人 Ga Com 13@153 conl| (各 电子 提 入 向 交 个 ， 清 委 央 刘 有 吕 生 委 全 


上 ma 上， [台大 立 限 日 和 后 面 的 内 容 不 应 包含 答 
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图 7-36 输入 多 个 电子 邮箱 地 址 时 的 效果 


国 要 03| 从 图 7-36 中 可 以 看 出 ， 不 指定 multiple 属性 而 输入 多 个 电子 邮箱 时 ， 会 自 
动 验证 并 提示 错误 。 这 时 ， 重 新 更 改 步骤 01 中 的 代码 ， 为 两 个 <inpu 忆 标记 添加 
multiple 属性 。 代 码 如 下 : 

电子 邮箱 : <input type="email" name="myemail" 

multiple="true"/>gnbsp; &nbsp; (如 果 电 子 邮 箱 有 多 个 ， 请 使 用 去 号 进行 分 隔 ) 

上 传 照片 : <input type="file" name="selfile" multiple /> 

重新 运行 上 述 代码 ， 查 看 效果 ， 并 输入 内 容 进行 测试 。 如 果 要 实现 多 张 昭 
片 的 选择 ， 可 以 按 下 Shift 键 再 选择 图 片 。 


3. pattem 属 性 


在 前 面 介绍 tel 输入 类 型 时 已 经 使 用 到 了 pattem 属性 ， 该 属性 用 于 验证 input 框 的 模 
式 ， 模 式 即 正则 表达 式 。patterm 属性 适用 于 类 型 是 text、search、url、tel、email 和 
password 的 <input 标 记 。 

【 例 7.16】 

向 网 页 的 表单 中 添加 多 行 两 列 的 表格 ， 每 一 行 供用 户 输入 不 同 的 信息 ， 通 过 pattern 属 
性 指定 验证 。 实 现 步骤 如 下 。 

第 一 行 第 二 列 供用 户 输入 姓名 ， 要 求 用 户 的 姓名 必须 是 汉字 ， 而 且 长 度 大 

于 12， 小 于 2。 代码 如 下 : 

<td align="right" width="20%"> 姓 名 : </td> 

<td><input type="text" name="username" pattern="^[\u4e00-\u9fa5\uf900- 

\ufa2d] {1,11}$"” /> (汉字 ， 只 能 包含 中 文字 符 (长 度 小 于 12， 大 于 2) ) </td> 

第 二 行 第 二 列 供用 户 输入 腾讯 QQ 号 码 。 代 码 如 下 : 

<td align="right">QQ 号 码 : </td> 

<td><input type="text" name="myqq" pattern="^[1-9] [0-9]{4,}$" /> (腾讯 QQ 

号 从 10000 开始 ) </td> 

于 沼 03| 第 三 行 第 二 列 提示 用 户 输入 固定 的 电话 号 码 ， 其 形式 是 “XXXX- 

XXXXXXX” 或 者 “XXX-XXXXXXXX”。 代 码 如 下 : 

<td align="right"> 固 定 电话 : </td> 

<td><input type="tel" name="mytel" pattern="\d{3}-\d{8}1\d{4}-\d{7}"/>( 国 

内 电话 号 码 (0511-4405222、021-87888822) ) </td> 

鸭 别 04| 继续 添加 供用 户 输入 手机 号 码 的 输入 框 ， 并 且 要 求 用 户 输入 的 手机 号 码 是 

以 13、14、15 或 18 开头 。 代 码 如 下 : 

<td align="right"> 手 机 号 码 : </td> 

<td><input type="text" name="myphone" pattern="^(13[0- 

9]114[517]115[01112131516171819]118[0111213151617181 9])\d{8}$"/>( 以 13、 

14、15、18 开头 的 电话 号 码 ) </td> 

添加 供用 户 输入 身份 证 号 的 输入 框 ， 并 且 要 求 输 入 的 身份 证 号 合法 。 页 面 

代码 如 下 : 

<td align="right"> 身 份 证 号 : </td> 

<td><input type="text" name="mycard" pattern="^\d{15}|\d{18}$"/>(15 位 或 

18 位 身份 证 号 ) </td> 

国 习 06| 添加 用 于 执行 提交 操作 的 按钮 ， 具 体 代码 不 再 给 出 。 

国 轨 07| 运行 页 面 ,查看 效果 ， 输 入 内 容 后 ， 单 击 按钮 进行 测试 ， 如 图 7-37 所 示 为 

Chrome 浏览 器 中 的 验证 效果 。 

继续 向 该 浏览 器 中 的 其 他 输入 框 输入 内 容 进行 测试 。 | 

力量 09| 不 同 的 浏览 器 导致 验证 的 效果 有 所 不 同 ， 如 图 7-38 所 示 为 Firefox 浏览 器 。 = .< 

验证 QQ 号 码 时 的 效果 。 CN 
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图 7-37 Chrome 浏 览 器 中 的 验证 效果 
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图 7-38 ”Firefox 验 证 QQ 号 码 时 的 效果 


例 7.16 进行 匹配 时 ， 


“^” 表示 开头 ， 


“$” 表 示 结 尾 。 除 了 该 示例 介绍 的 这 些 表 达 式 


外 ， 使 用 pattem 属性 还 可 以 指定 正则 表达 式 匹配 其 他 信息 。 例 如 ， 在 表 7-5 中 列 出 了 其 他 


常用 的 正则 表达 式 。 


表 7-5 常用 的 正则 表达 式 和 说 阴 


正则 表达 式 说 明 
^[0-9]*$ 数字 
Ad{n}$ n 位 的 数字 
^\d{n,}$ 至 少 n 位 的 数字 
Nd{mn}$ m~n 位 的 数字 


^([1-9][0-9]*)+(C.[0-9]{1.2})28 
^Q-N)Nd+Q ds 


非 零 开头 的 最 多 带 两 位 小 数 的 数字 
正 数 、 负 数 和 小 数 


Ad+$ 或 ^[1-9]\d*|08 非 负 整 数 
^-[1-9]vd*l0$ 或 ^(C\dH)0HD)$ 非 正 整数 
^[\u4e00-\u9fa5]{0.}$ 让 会 
^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4.40}$ 英文 和 数字 


人 ^[A-7a-zl+$ 
^[A-Za-z0-9]+$ 


由 26 个 英文 字母 组 成 的 字符 串 
由 数字 和 26 个 英文 字母 组 成 的 字符 串 


De 
EE 
续 表 2 
二 
正则 表达 式 说 明 
w+$ 或 Aw{3,20}$ 由 数字 、26 个 英文 字母 或 者 下 划 线 组 成 的 字符 串 疆 
小 4E00-Vu9FA5A-Za-z0-9 ]+$ 中 文 、 英 文 、 数 字 包括 下 划 线 a 
^[\u4E00-\u9FASA-7a-z0-9]+$ 中 文 、 英 文 、 数 字 但 不 包括 下 划 线 等 符号 妆 
或 [m4E00-w9FA5A-Za-z0-9]{2.20}$ 全 
AwH([LHJwbDxG@NwH[C wt) w+([- E-mail 地 址 全 
JwH)*$ 用 
[a-zA-z]+:/[ 和 \s]* URL 地 址 
或 ^http:/([\w-]H\J+[\w-]HOU[VWw-/2o%o&=]92$ 
^([0-9]){7,18}(x[X)?$ 以 数字 、 字 母 x 结尾 的 短 身份 证 号 
或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}2$ 
^[a-zA-Z][a-zA-Z0-9 ]{4,15}$ 账号 是 否 合法 (字母 开头 ， 允 许 5~16 字 节 ， 人 允许 字母 数 
字 下 划 线 ) 
^[a-zA-Z]\w{5,17}$ 密码 (以 字母 开头 ， 长 度 在 6~18 之 间 ， 只 能 包含 字母 、 
数字 和 下 划 线 ) 


4. placeholder 属 性 

placeholder 属性 提供 一 种 提示 ， 描 述 输入 框 所 期 待 的 值 。placeholder 属性 适用 于 类 型 
是 text、search、url、tel、email 以 及 password 的 <input> 标 记 。 

在 使 用 placeholder 属性 时 ， 提 示 会 在 输入 框 为 空 的 时 候 显示 出 来 ， 而 在 输入 框 获得 焦 
点 时 消失 。 

【 例 7.17】 

在 上 个 示例 的 基础 上 进行 更 改 ， 分 别 为 “姓名 ”和 “QQ 号 码 ” 输 入 框 指定 

placeholder 属性 。 相 关 的 代码 如 下 : 


<input type="text" name="username" pattern="^[\u4e00-\u9fa5\uf900- 
Nufa2d] {1,11}$" placeholder=" 例 如 : 许飞 飞 或 欧阳 小 鱼 "” /> 

<input type="text" name="myqq" Pattern="^[1-9] [0-9] {4,}$" 
placeholder="10000" /> 


在 浏览 器 中 运行 上 述 代 码 ， 查 看 效果 ， 如 图 7-39 所 示 。 

5.，required 属 性 

在 7.3 节 介 绍 的 HIML 5 中 新 增 的 输入 类 型 时 ， 这 些 类 型 并 不 会 自动 判断 用 户 是 否 在 
输入 框 中 已 经 输入 内 容 ， 只 有 在 输入 框 中 输入 内 容 时 才 会 进行 判断 。 如 果 开 发 者 需要 要 求 
某 个 输入 框 的 内 容 是 必须 填写 的 ， 那 么 可 以 为 <inpu 亿 标记 指定 required 属性 。 

required 属性 指定 必须 在 提交 之 前 填写 输入 框 ， 即 输入 框 不 能 为 空 。 例 如 ， 用 户 登 录 
时 要 求 必须 输入 用 户 名 和 密码 ， 这 时 可 以 为 它们 指定 required 属性 。 
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lsceholder 生 入 = 上 
€ 3 @ Dfile///D/htmls/formtest/seventeen html 


外 行 : (取证 只 棋 忆 会 中 文 闻 行 【长 康 小 于 12， 大 2) 》 
ann: (有 QQR 欠 10000 有 铂 ) 
国定 全 运 : ( 剖 站 已 十 号 雄 (0511 -4405222、021-47845#22)) 
FNSR: (13.14 15, 15H200S) 
NE 地 医 15 人 HE) 
区 3 


7-39 ”placeholder 属 性 的 使 用 


【 例 7.18】 


继续 在 上 个 示例 的 基础 上 添加 代码 ， 为 “姓名 ”和 “手机 号 码 ” 的 <input> 标 记 指定 
required 属性 。 相 关 代码 如 下 : 


<input type="text" name="username" pattern="^[\u4e00-\u9fa5\uf900- 
\ufa2d] {1,11}$" placeholder=" 例 如 : 许飞 飞 或 欧阳 小 鱼 "” required /> 

<input type="text" name="myphone" pattern="^(13[0-9]114[517]115 
[01112131516171819]118[0111213151617181 9])\d{8}$" required="true"/> 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 直 接 单 击 “ 提 交 ” 按 钮 进行 测试 ，Chrome 浏 
览 器 中 的 效果 如 图 7-40 所 示 。 


" 开 


€ 了 © OD tie//D:/htmls/formtest/eighteen.html 


可 名 [小生 和 (要 字 ， 只 必 和信 申 久 字 季 《长 导 小于 12, 大 于 2) ) 
《里 未 QQB 从 10000 开 弛 ) 
(P0311. 4403222 ，021 8728852) 


ms 一 ] ka 14. 15, IF RA) 
WR AR) 


7-40 required 属 性 的 使 用 


浏览 器 不 同 ， 导 致 显示 的 效果 也 会 有 所 不 同 ， 图 7-41 显示 了 required 属性 在 Firefox 
浏览 器 中 的 效果 。 


[re 
加 |] wasn [+] 


€ el/D/mms /omteyegheen mm 日 


| 国 -27-mP| -加 -会 咎 - 针 - 和 a 


| 
gt: [Br VRID ] (zs, nessxsg (Ft 2) ) | 
CoRR 租 访 QOR 从 10000 开 铀 》 
BAR tans222. nn-e70tae7m | 
saa os os veraoassn) 


15 们 或 18 的 身份 还 号 } 


图 7-41 Firefox 浏 览 器 显示 required 属 性 的 效果 


7.5 实战 一 一 修改 用 户 个 人 资料 


目前 ， 许 多 网 站 都 提供 了 用 户 的 注册 信息 (例如 购物 网 站 )， 这 些 信 息 非 常 简单 ， 包 括 
登录 账号 和 密码 ， 用 户 注册 成 功 后 ， 可 以 在 修改 页 面 修改 个 人 资料 进行 补充 ， 本 节 实 战 将 
本 章 介绍 的 内 容 结合 起 来 ， 实 现 用 户 个 人 资料 修改 页 面 的 设计 ， 并 且 根 据 需 要 实现 这 些 信 
息 的 基本 验证 。 

修改 用 户 资料 页 面 非 常 简单 ， 大 多 数 知 识 都 是 利用 本 章 介 绍 的 属性 、 类 型 和 元 素 。 实 
现 步 骤 如 下 。 

国 加 01| 向 HTML 网 页 中 添加 表单 元 素 ， 指 定 <form> 标 记 的 action 属性 、method 

属性 和 autocomplete 属性 。 代 码 如 下 : 
<form action="#" method="get" autocomplete="off"> 
<!-- 省 略 其 他 内 容 --> 

</form> 

向 表单 元 素 中 添加 一 个 10 行 两 列 的 表格 ， 并 且 为 表格 指定 标题 。 部 分 代码 
如 下 : 

<table align="center" width="100%"> 
<caption><h1> 修 改 或 者 完善 用 户 个 人 资料 </h1></caption> 
<!-- 省 略 其 他 内 容 --> 

</table> 

显示 用 户 登 录 名 信息 ， 一 般 情况 下 ， 用 户 登 录 名 不 能 更 改 ， 只 能 查看 。 相 
关 代 码 如 下 : 

<td align="right"> 用 户 登 录 名 : </td> 


<td><input type="text" name="loginname" value="hellome@163.com" disabled 


readonly size= "50"/> (不 能 修改 ， 只 能 查看 ) </td> 

添加 供用 户 输入 真实 姓名 的 输入 框 ， 通 过 pattem 属性 验证 输入 的 内 容 只 能 
是 汉字 ，placeholder 属性 显示 一 个 基本 提示 ，required 属性 指定 该 输入 框 是 必 填 
的 ，autofocus 属性 指定 默认 的 焦点 。 代 码 如 下 : 


<td align="right"> 真 实 姓名 : </td> 

<td><input type="text" name="realname" pattern="^[\u4e00-\u9fa5] {0,}$" 

Placeholder=" 例 如 : 许 鱼 "required autofocus size="50"/> (必须 填写 ， 只 能 输入 汉 

字 )</td> 

医 罚 05| 添加 供用 户 输入 真实 年 龄 的 输入 框 ， 指 定 type 属性 的 值 为 number， 并 且 年 
龄 在 15 岁 到 120 之 间 ， 该 项 是 必 填 的 ， 默 认 年 龄 是 24 岁 。 代 码 如 下 : 


<td align="right"> 真 实 年 龄 : </td> 
<td><input type="number" name="realage" value="24" min="15" max="120" 
required="true"” style="width:335px;"/> (必须 填写 ) </td> 


国力 06] 添加 供用 户 输入 或 选择 出 生日 期 的 输入 框 ， 将 type 属性 的 值 设置 为 date， 
并 且 该 项 是 必 填 的 。 代 码 如 下 : 
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<td align="right"> 出 生日 期 : </td> 
<td><input type="date" name="birthday" value="1990-10-10" 
required="required"” size="50" style="width:335px;"/> (必须 填写 ) </td> 


国 加 07| 添加 供用 户 输入 电子 邮箱 的 输入 框 ， 允 许 用 户 输入 多 个 电子 邮箱 ， 多 个 邮 
箱 之 间 通 过 逗号 进行 分 隔 ， 并 且 该 项 是 必 填 的 。 代 码 如 下 : 
<td align="right"> 电 子 邮 箱 : </td> 


<td><input type="email" name="myemail™" 
placeholder="12345@qq.com, sale@163.com" required multiple="true" 


size="50" /> (必须 填写 ) </td> 

国 玫 08] 添加 供用 户 输入 身份 证 号 的 输入 框 ， 该 项 是 必 填 的 。 用 户 身份 证 号 有 15 位 
或 18 位 ， 并 且 身 份 证 号 的 最 后 一 位 可 以 由 数字 或 者 字母 X 结尾 ， 通 过 pattem 属 
性 进行 验证 。 代 码 如 下 : 

<tqd align="right"> 身 份 证 号 : </td> 

<td><input type="text" name="card" required pattern="^\d{8,18}|[0-9x] 

el size="50"/> (必须 填写 ， 能 够 以 数字 或 字母 x 结尾 的 短 身份 证 

5)</td> 

用 户 必须 输入 自己 的 手机 号 码 ， 手 机 号 码 必须 以 13、14、15 和 18 开头 ， 
其 中 ， 以 14 开头 的 电话 号 码 必须 是 145 和 147， 以 15 和 18 开头 的 电话 号 码 ， 其 
第 3 位 数字 不 能 为 4， 即 不 能 是 154 或 者 184。 代 码 如 下 : 

<td align="right"> 手 机 号 码 : </td> 

<td><input type="tel" name="card" required pattern="^(13[0-9] 

114[517]115[01112131516171819]118[01112131516171 819])\d{8}$" 

size="50"/> (必须 填写 ， 手机 号 码 必须 以 13、14、15 和 18 开头 )</td> 

页 面 中 包含 个 人 主页 ， 该 项 是 选 填 的 ， 并 要 设置 <input> 标 记 的 list 属 

性 、placeholder 属性 和 pattem 属性 。 代 码 如 下 : 


<td align="right"> 个 人 主页 : </td> 

<td><input type="url" name="myaddress" list="urllist" 

placeholder="http://www.baidu.com" pattern= "^htt p://([\w-]+\.)+[\w-]+ 

(/[\w-./2%&=]*)2$" size="50"/>( 选 填 )</td> 

<datalist id="urllist"> 
<option>http://www.baidu.com</option> 
<option>http://t.qq.com</option> 
<option>http://www.sina.com</option> 

</datalist> 


力 国 11| 向 页 面 中 提供 一 个 供用 户 选择 的 幸运 颜色 项 ， 该 项 是 选 填 的 ， 并 且 默 认 值 
为 本 FBBCC。 代 码 如 下 : 


<td align="right"> 幸 运 颜 色 : </td> 
<td><input type="color" name="1ovecolor" value-"#FFBBCC"/>( 选 填 )</td> 


国 轨 人 2| 添加 供用 户 进行 操作 的 “提交 ”按钮 和 “ 重 置 ”按钮 。 代 码 如 下 : 


<td><input type="submit" value=" 提 交 " />gnbsp;<input type="reset" /> 
</td> 


区 


NN 


勾 
第 
国事 13|] 在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 图 7-42 显示 了 初始 效果 。 = 
是 
己 瑟 项 对 
了 记 导 改 用 户 个 人 资料 x 填 
二 © |D fie///D/htmls/formtest/example.html 立 | 三 上 
a 
修改 或 者 完善 用 户 个 人 资料 妆 
用 户 登 录 名 : hellome@163com (不 能 入 ,只 能 查看 ) 表 
姓名 :加 各 下旬 ( 志 须 二 本， 只 散 输 入 汉字 ) 单 
真实 和 的 : [24 本 图 《必须 号 》 的 
出 生日 期 |1990710710 加 加 《必须 请 写 ) 使 
电子 地 福 : @ ee (5S) 用 
身份 下: | = ( 少 须 时 本 ， 能 名 以 数字 或 字母 x 结尾 的 短 身价 证 号 ) 
手机 号 码 : (必须 时 配 ， 手机 号 码 少 须 以 13、14、15 和 1 8 开头) 
沾 人 主页 : httpJ/www ba ( 选 填 ) 
声色 : | 国 El (过 二 
提交 | | 重 于 


7-42 修改 用 户 个 人 资料 页 面 的 初始 效果 


向 页 面 中 的 输入 框 中 输入 内 容 进 行 测试 ， 输 入 完毕 后 单 击 “提交 ”按钮 提 
交 信息 ， 验 证 效果 如 图 7-43 所 示 。 


本 ET :| 
中 屠 改 用 户 个 人 资料 x\ 
© [ file///D:/htmls/formtest/example.html 一 
修改 或 者 完善 用 户 个 人 资料 
用 户 登 录 名 : hellome@163.com 《不 能 修改 ， 只 能 查看 》 
真实 姓名 ， | 小 宣 蜂 《必须 请 写 ， 只 能 输入 汉字 ) 
真实 年 前 : [24 《必须 请 写 ) 
出 生日 期 : |1990/10/10 (必须 填写 ) 
电子 邮箱 : joveme@153 .com loveyou@163.com 《必须 请 写 ) 
身份 证 号 : [4158 ] (必须 填写 ， 多 9 以 数 字 或 字母 x 向 尾 的 拓 身 份 让 号) 
手机 总 码 : |12136967456 回 请 与 所 请 求 的 格式 保持 一 致 。 司 , 手机 号 码 必须 以 13、14、15 和 和 18 开头) 
个 人 让 页 ， np/wmwwbaiducm 0) 
幸运 闫 色 。 | | (过 十 ) 
EE 


7-43 ”验证 用 户 输入 的 内 容 


7.6 表单 验证 


HTML 5 中 新 增 了 大 量 的 输入 类 型 、 表 单 属性 和 表单 元 素 ， 同 时 也 加 强 了 对 表单 元 素 
的 验证 功能 。 表 单 验证 是 一 套 系统 ， 它 为 终端 用 户 检测 无 效 的 数据 并 标记 这 些 错 误 。 下 面 
简单 了 解 表单 验证 的 知识 ， 并 且 介 绍 几 种 验证 操作 。 
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(6.1 表单 验证 概述 


表单 验证 是 一 种 用 户 体验 的 优化 ， 让 Web 应 用 程序 更 快速 地 抛 出 错误 ， 但 是 它 不 能 取 
代 服 务 器 端 验证 。 前 端 验证 是 可 以 绕 过 的 ， 因 此 ， 重 要 数据 还 要 依赖 于 服务 器 端的 验证 。 
在 HIML 网 页 中 ， 使 用 表单 验证 有 两 个 好 处 ， 它 不 仅 可 以 避免 信息 无 法 更 新 或 出 现 新 错 
误 ， 而 且 减 轻 了 服务 器 端的 压力 。 
根据 验证 的 提交 方式 ， 可 以 将 验证 分 为 自动 验证 、 显 式 验证 和 自 定义 验证 三 种 。 显 式 
验证 和 自 定 义 验证 分 别 在 7.6.2 和 7.6.3 小 节 中 进行 介绍 。 另 外 ， 可 以 取消 表单 验证 ， 取 消 
验证 参考 7.4.1 小 节 的 novalidation 属性 说 明 。 
自动 验证 是 HTML 5 表单 的 默认 验证 方式 ， 它 会 在 表单 提交 时 执行 自动 验证 。 如 果 输 
入 框 的 内 容 不 合法 ， 那 么 验证 将 无 法 通过 ， 不 会 提交 表单 。HTML 5 中 新 增加 的 多 种 属性 
都 实现 了 自动 验证 的 功能 。 
e@ required: 该 属性 限制 在 提交 时 元 素 内 容 不 能 为 空 。 如 果 元 素 中 的 内 容 为 空 ， 则 不 
允许 提交 。 
@ ”pattem: 该 属性 根据 设置 的 正则 表达 式 的 格式 验证 输入 的 内 容 是 否 有 效 ， 如 果 无 
效 ， 则 不 允许 进行 提交 。 
emax 和 min: 这 两 个 属性 限制 数值 类 型 输入 范围 的 最 大 值 和 最 小 值 ， 不 在 范围 内 
的 不 允许 进行 提交 。 
e@ step: 该 属性 限制 元 素 的 值 每 次 增加 或 者 减少 的 基数 ， 不 是 基数 倍数 时 不 允许 提 
交 。 例 如 ， 当 想 让 用 户 输入 的 值 在 0~100 之 间 ， 而 且 必 须 是 5 的 倍数 时 ， 可 以 将 
step 属性 的 值 指定 为 5。 
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自动 验证 可 以 对 用 户 输入 的 内 容 进行 验证 ， 但 是 ， 有 时 候 ， 自 动 验证 并 不 能 够 完全 满 
足 开发 者 的 要 求 ， 这 时 可 以 使 用 显 式 验 证 。 显 示 验 证 需要 调用 checkValidity0 方 法 ， 它 对 
表单 内 所 有 元 素 或 者 单个 元 素 进行 有 效 性 验证 。fomm 元 素 、input 元 素 、select 元 素 和 
textarea 元 素 都 具有 checkValidity0 方 法 ， 该 方法 以 布尔 值 的 形式 返回 验证 结果 。 另 外 ， 
form 元 素 和 input 元 素 都 存在 一 个 validity 属性 ， 这 个 属性 返回 ValidityState 对 象 。 
【 例 7.19】 
通过 checkValidity0 方 法 验证 用 户 输入 的 内 容 是 否 符合 要 求 ， 实 现 步骤 如 下 所 示 。 
向 页 面 中 添加 两 个 输入 框 和 一 个 按钮 ， 第 一 个 输入 框 表示 生日 ， 其 type 属 

性 值 为 date 类 型 ， 第 二 个 输入 框 表 示 邮 件 地 址 ， 其 type 属性 值 为 email。 代 码 如 下 : 
<form action="test.html" method="get"> 

&nbsp; gnbsp; 生 gnbsp;&gnbsp; 日 : <input id="birth" name="birth" 

type="date"/><br/> 

邮件 地 址 : <input id="email" name="email" type="email"/><br/> 


<input type="submit" value=" 提 交 " onclick="return check();"/> 
</form> 


国 漳 02| 从 上 个 步骤 中 可 以 看 出 ， 按 钮 具有 一 个 onclick 事件 属性 ， 该 属性 调用 
check0O 函 数 。 该 函数 的 代码 如 下 : 
<script type="text/javascript"> 
var check = function() { 
return commonCheck ("birth",， "生日 "， "字段 必须 是 有 效 的 日 期 ! ") 
&& commonCheck ("email",“" 邮 件 地 址 "， "字段 必须 符合 电子 邮件 的 格式 ! "); 


} 
</script> 


鸭 贸 03| 从 步骤 02 中 可 以 看 出 ，check0 函 数 直 接 返 回调 用 的 commonCheck0 函 数 的 
结果 。commonCheck() 函 数 包含 3 个 参数 : 第 一 个 参数 指定 字段 的 id 属性 值 ， 第 
二 个 参数 指定 字段 名 称 ， 最 后 一 个 参数 指定 提示 信息 。 函 数 代码 如 下 : 
Var commonCheck = function (field ，fieldName ，tip) { 
Var targetEle = document .getElementById(field) ; 
if (targetEle.value.trim() == "") { // 如 果 该 字段 的 值 为 空 
alert (fieldName + "字段 必须 填写 ! ") ; 
return false; 
else if(!targetEle.checkValidity()) { // 执行 输入 校 验 


alert (fieldName + tip); 
return false; 


return true; 


} 
在 上 述 代码 中 ， 首 先 通 过 document.getElementById0) 获 取 网 页 中 指定 的 id 属性 值 对 
象 ， 接 着 判断 该 对 象 的 value 属性 值 是 否 为 室 ， 如 果 为 室 ， 弹 出 “ 关 字 段 必 须 填写 ! ”的 
提示 ， 并 且 返 回 false; 如 果 字段 不 为 空 ， 则 调用 checkValidity0 方 法 执行 输入 验证 ， 并 弹 
出 提示 ， 且 返回 结果 为 false。 
在 浏览 器 中 运行 本 次 示例 的 代码 ， 单 击 按钮 进行 测试 ， 查 看 checkValidity0 
方法 的 验证 结果 ， 如 图 7-44 所 示 。 
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图 7-44 checkValidity() 方 法 的 验证 效果 


7.6.3 setCustomValidity() 验 证 


setCustomValidity0 方 法 适用 于 HTML 5 中 的 所 有 类 型 的 input 元 素 ， 通 过 自 定义 的 方 
式 对 用 户 输入 的 信息 进行 验证 。setCustomValidity0 方 法 与 checkValidity0 方 法 一 样 ， 通 常 
都 会 结合 JavaScript 脚本 使 用 。 
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【 例 7.20】 
继续 在 上 个 示例 的 基础 上 更 改 内 容 ， 利 用 上 个 示例 的 页 面 ， 通 过 setCustomValidity0 方 
法 自 定 义 验 证 信息 。 实 现 步骤 如 下 。 
国 玫 01] 向 HTML 网 页 中 添加 输入 框 和 按钮 ， 并 且 为 第 二 个 输入 框 指定 required 属 
性 。 代 码 如 下 : 


<form action="#" method="get"> 
gnbsp; gnbsp; 生 gnbsp; gnbsp; 日 : <input id="birth" name="birth" 
type="date"/><br/> 
邮件 地 址 : <input id="email" name="email" type="email" required /><br/> 
<input type="submit" value=" 提 交 " onclick="testcheck();"/> 
</form> 


加 02| 添加 Javascript 脚本 函数 ， 在 函数 中 分 别 判断 “生日 ”输入 框 和 “邮件 地 
址 ”输入 框 的 内 容 是 否 为 空 。 函 数 代码 如 下 ; 


<script type="text/javascript"> 
Var testcheck = function(){ 
var birthEle = document .getElementById("birth"); 
if (birthEle.value.trim() == "") { // 如 果 该 字段 的 值 为 空 
birthEle.setCustomValidity(" 生 日 怎么 能 不 填写 呢 ? 快 来 输入 吧 ! ") ; 
} else { 
birthEle.setCustomValidity(""); 


} 

Var emailEle = document .getElementById ("email"); 

if (emailEle.value.trim() == "") { // 如 果 该 字段 的 值 为 空 
emailEle.setCustomValidity(" 还 没有 输入 您 的 邮箱 呢 ? 请 输入 ") ; 

} else { 
emailEle.setCustomValidity(""); 

} 

} 
</script> 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 输 入 内 容 后 ， 单 击 按钮 进行 测试 ， 
如 图 7-45 所 示 为 提示 用 户 输入 邮件 地 址 的 效果 。 从 该 图 中 可 以 看 出 ， 虽 然 为 “ 邮 
件 地 址 ”输入 框 指定 了 required 属性 ， 但 是 它 并 没有 提示 ， 而 是 显示 了 自 定义 的 
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国 加 04| 向 邮件 地 址 中 输入 内 容 后 ， 继 续 单 击 “ 提 交 ” 按 钮 提交 信息 ， 此 时 会 自动 
验证 用 户 输入 内 容 的 合法 性 ， 效 果 如 图 7-46 所 示 。 
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根据 提示 信息 更 改 邮件 地 址 的 内 容 ， 更 改 以 后 再 次 单 击 按钮 进行 提交 。 


7.7 本 章 习 题 


1. 填空 题 

(1) 表单 由 表单 元 素 、 和 表单 按钮 三 部 分 组 成 。 

(2) 元 素 是 密 钥 生成 器 ， 作 用 是 提供 一 种 验证 用 户 的 可 靠 方法 。 

(3) output 元 素 最 常用 的 3 个 属性 是 for、form 和 

(4) 类 型 是 一 种 专门 用 于 输入 搜索 关键 词 的 输入 杠 . 

(5) multiple 属性 适用 于 类 型 是 和 file 的 <input> 标 记 。 

(6) 属性 提供 一 种 提示 ， 该 提示 会 在 输入 框 为 空 时 显示 出 来 ， 在 输入 框 获 
得 焦点 时 消失 。 

2. 选择 题 

(1) datalist 元 素 与 input 元 素 结合 使 用 时 ， 需 要 指定 datalist 元 素 的 属性 和 
input 元 素 的 属性 。 

A. id、 name B. name、 1d C. id, list D. list、 id 
(2) HTML 5 中 新 增 的 输入 类 型 不 包括 


A. email B. checkbox C. range D. number 


(3) 在 如 图 7-47 所 示 的 Chrome 效果 图 中 ， 一 定 不 会 使 用 到 输入 类 型 。 
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(4) number 输入 类 型 的 输入 框 能 够 设置 对 所 接受 的 数值 的 限定 。 该 输入 类 型 和 其 他 属 
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性 结合 使 用 时 ， 可 以 通过 设置 属性 指定 输入 域 合法 的 间隔 ， 该 属性 的 默认 值 为 1 。 
A. value B. min C. max D. step 
(5) HTML 5 中 新 增 的 与 表单 有 关 的 两 个 属性 是 
A. autocomplete 和 novalidate B. autocomplete 和 autofocus 
C. autofocus 和 novalidate D. autocomple 和 required 
(6) HTML 5 中 新 增 的 属性 指定 输入 框 的 内 容 必须 填写 。 
A. multiple B. autofocus C. pattem D. required 


3. 上 机 练习 


(1) 利用 新 增 的 输入 类 型 和 属性 设计 网 页 

根据 图 7-48 的 效果 设计 页 面 ， 页 面 中 可 以 使 用 本 章 介 绍 的 元 素 、 输 入 类 型 和 属性 。 其 
中 ， 通 过 datalist 元 素 定义 了 一 系列 的 选项 列表 ， 供 用 户 在 “姓名 ”输入 框 选择 ， 选 项 列表 
如 图 7-49 所 示 。 
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(2) 表单 的 显 式 验证 和 自 定义 验证 
读者 可 以 根据 图 7-48 和 7-49 的 效果 ， 通 过 显 式 验证 或 者 自 定义 验证 的 方式 验证 表单 
中 输入 框 的 内 容 是 否 合法 。 在 验证 过 程 中 ， 可 以 自 定 义 验证 的 信息 提示 。 


HTML 5 操作 页 面 图 形 


HTML 5 规范 引进 了 许多 新 特性 ， 其 中 最 售 人 期 待 之 一 的 就 是 canvas 元 素 。 
HIML 5 中 的 canvas 提供 了 通过 JavaScript 绘制 图 形 的 方法 ， 该 方法 使 用 简单 ， 
但 是 功能 非常 强大 。 可 以 通过 它 来 动态 生成 和 展示 图 形 、 图 表 、 图 像 以 及 动画 ， 
每 一 个 canvas 元 素 都 有 一 个 上 下 文 对 象 ， 在 其 中 可 以 绘制 任意 图 形 。 本 章 介绍 
2D canvas 基础 知识 以 及 如 何 使 用 基本 canvas 方法 绘制 图 形 。 

通过 本 章 的 学 习 … 读 者 不 仅 本 以 和 解 Yeanvas 的 历史 与 浏览 器 的 支持 情况 ， 
还 可 以 绘制 各 种 图 形 ， 例 如 线条 、 三 角形 、 和 矩形 、 圆 形 、 局 形 、 贝 塞 尔 曲 线 、 线 
性 和 径 向 渐变 以 及 图 片 等 ， 还 可 以 熟练 地 对 图 形 进 行 旋转 、 平 移 和 缩放 等 操作 。 

本 章 学 习 目 标 : 
了 解 canvas 元 素 的 历史 
掌握 如 何 绘制 文本 、 甜 形 
熟悉 与 路 径 有 关 的 方法 
掌握 线条 、 圆 形 、 贝 塞 尔 曲线 的 绘制 
掌握 图 形变 换 效果 的 实现 
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NN 熟悉 transform() 方 法 的 使 用 
N 掌握 drawImage0 方 法 的 使 用 
NN 了 解 如 何 实现 动画 效果 


8.1 了 解 canvas 元 素 


canvas 元 素 是 HIML 5 中 新 增加 的 一 个 元 素 ， 专 门 用 来 绘制 图 像 、 图 形 、 文 字 及 动画 
等 。 本 节 简 单 了 解 canvas 元 素 的 基础 知识 ， 包 括 它 的 历史 、 概 念 、 与 CSS 的 关系 以 及 
Canvas API 等 内 容 。 


GE canvas 历史 


canvas 的 概念 最 初 是 由 苹果 公司 提出 的 ， 用 于 在 Mac OS X WebKit 中 创建 控制 板 部 件 
(Dashboard Widget)。 在 canvas 出 现 之 前 ，Web 开发 者 如 果 要 在 浏览 器 中 使 用 绘图 API， 只 
能 使 用 Adobe 的 Flash 和 SVG(Scalable Vector Graphics， 可 伸缩 矢量 图 形 ) 插 件 ， 或 者 只 有 
下 才 支持 的 VML(Vector Markup Language， 矢 量 标记 语言 )， 以 及 其 他 一 些 稀奇 古怪 的 
JavaScript 技巧 。 

假设 Web 开发 者 要 在 没有 canvas 元 素 的 条 件 下 绘制 一 条 对 角 线 ， 这 听 起 来 非常 简 
单 ， 但 实际 上 如 果 没 有 一 套 二 维 绘图 API 的 话 ， 将 会 是 一 项 相当 复杂 的 工作 。 在 HIML 5 
中 ，canvas 能 够 提供 这 样 的 功能 ， 对 浏览 器 端 来 说 此 功能 非常 有 用 ， 因 此 ，canvas 被 纳入 
了 HTML 5 规范 。 

最 初 ， 苹 果 公 司 曾 暗示 可 能 会 为 WHATWG 草案 中 的 canvas 规范 申请 知识 产权 ， 这 在 
当时 引起 了 Web 标准 化 追随 者 的 关注 ， 不 过 ， 苹 果 公 司 最 终 还 是 按照 W3C 的 免 版 税 专利 
权 许 可 条 款 公 开 了 其 专利 。 


.12 canvas 元 素 


canvas 元 素 只 是 一 个 图 形 的 容器 ， 它 本 身 不 具有 任何 行为 ， 但 是 它 把 一 个 API 展现 给 
客户 端 脚 本 ， 所 有 使 用 者 必须 将 它 与 脚本 结合 起 来 绘制 图 形 ， 以 便 脚 本 能 够 把 想 绘制 的 东 
西 都 绘制 到 一 块 画布 上 。 

在 网 页 上 使 用 canvas 元 素 时 ， 它 会 创建 一 块 矩 形 区 域 。 如 下 是 HTML 页 面 中 最 基本 
的 canvas 元 素 : 


<canvas></canvas> 


在 默认 情况 下 ，canvas 元 素 创建 的 矩形 区 域 宽度 为 300 像素 ， 高 度 为 150 像素 , 但 
Web 开发 者 也 可 以 自 定义 具体 的 大 小 或 者 设置 canvas 元 素 的 其 他 属性 。 代 码 如 下 : 

<canvas width=200 height=200 id="djx" style="border:1lpx solid red;"> </canvas> 

尽管 canvas 元 素 的 功能 非常 强大 ， 用 处 也 很 多 ,但 是 在 某 些 情况 下 ， 如 果 其 他 元 素 已 
经 够 用 了 ， 就 不 应 该 再 使 用 canvas 元 素 。 例 如 ， 使 用 canvas 元 素 在 HTML 页 面 中 动态 绘 
制 所 有 不 同 的 标题 ， 还 不 如 直接 使 用 标题 样式 元 素 (例如 hl、h2 和 h3 等 )， 它 们 的 实现 效 
果 是 一 样 的 。 
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(8.1.3 CSS 和 canvas 


同 大 多 数 HTML 元 素 一 样 ，canvas 元 素 也 可 以 通过 应 用 CSS 的 方式 来 增加 边框 ， 设 
置 内 边 距 、 外 边 距 等 ， 而 且 一 些 CSS 属性 还 可 以 被 canvas 内 的 元 素 继承 。 例 如 字体 样 
式 ， 在 canvas 内 添加 的 文字 ， 其 样式 默认 同 canvas 元 素 本 身 是 一 样 的 。 

另外 ， 在 canvas 中 为 context 设置 属性 同样 要 遵从 CSS 语法 。 例 如 ， 对 context 应 用 颜 
色 和 字体 样式 ， 这 跟 在 任何 HTML 和 CSS 文档 中 使 用 的 语法 完全 一 样 。 


(8.1 .4 Canvas API 


canvas 元 素 只 是 一 个 容器 ， 它 并 不 能 够 做 任何 事情 ， 在 Windows 中 绘制 图 形 时 需要 得 
到 一 个 上 下 文 设备 DC， 同 样 ， 使 用 canvas 元 素 绘图 时 ， 需 要 先 得 到 一 个 泻 染 上 下 文 对 象 
Context。 

上 下 文 对 象 可 以 让 各 种 不 同 的 图 形 设 备 在 外 界 看 起 来 都 是 同一 个 样式 ， 这 样 读者 只 需 
要 关注 绘图 ， 其 他 的 工作 都 可 以 交 给 操作 系统 和 浏览 器 。 简 单 地 说 ， 上 下 文 对 象 就 是 把 各 
式 各 样 的 “具体 ” 变 成 一 个 统一 的 “抽象 ”， 从 而 减轻 开发 者 的 负担 。 

使 用 canvas 绘图 时 并 不 是 直接 绘制 到 屏幕 上 的 ， 而 是 先 画 到 一 个 上 下 文 Context 上 ， 
然后 再 刷新 到 屏幕 上 。 

每 个 canvas 元 素 都 有 一 个 对 应 的 Context 对 象 ， 并 且 该 对 象 是 唯一 的 。Canvas API 定 
义 在 这 个 Context 对 象 上 ， 因 此 需要 获取 Context 对 象 。 获 取代 码 如 下 : 


Var canvas = document .getElementById ("myCanvas"); 
if (canvas.getContext){ 
Var ctx = canvas.getContext ("2d"); 


} 

在 上 述 代 码 中 ，getContext0 方 法 指定 一 个 参数 “2d”*"， 表 示 该 canvas 对 象 用 于 生成 2D 
图 案 ， 即 平面 图 案 。 如 果 是 参数 “3d"， 就 表示 用 于 生成 3D 图 像 ( 即 立体 图 案 )， 这 部 分 实际 
上 单独 叫 作 WebGL API( 本 章 不 涉及 )。 


芭 忆 提示 : 上 下 文 对 象 中 提供 了 用 于 在 画布 上 绘图 的 方法 和 属性 ， 这 些 属 性 和 方法 用 
于 在 画布 上 绘制 文本 、 线 条 、 和 矩形 和 圆 形 等 。 关 于 这 些 属性 和 方法 ， 会 在 后 面 的 小 节 中 
绘制 图 形 时 进行 介绍 。 


615 浏览 器 支持 情况 


目前 ， 许 多 主流 的 浏览 器 都 提供 了 对 canvas 元 素 的 支持 ， 用 户 可 以 从 测试 网 站 上 查看 
浏览 器 对 该 元 素 的 支持 情况 ， 如 图 8-1 所 示 。 

在 使 用 canvas 元 素 之 前 ， 可 以 通过 代码 判断 当前 使 用 的 浏览 器 是 否 支持 该 元 素 。 一 般 
情况 下 ， 用 以 下 3 种 方法 进行 判断 。 
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图 8-1 Chrome 对 canvas 的 支持 


1 . 向 元 素 的 开始 和 结束 标记 添加 内 容 
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canvas 元 素 与 audio 和 video 等 元 素 一 样 ， 可 以 直接 在 该 元 素 的 开始 标记 和 结束 标记 之 


间 添 加 代码 ， 如 果 浏 览 器 不 支持 该 元 素 ， 则 会 显示 标记 之 间 的 内 容 。 代 码 如 下 : 


<canvas> 
当前 浏览 器 不 支持 canvas 元 素 。 


</canvas> 


2 . 判断 getContext0 方 法 
可 以 直接 在 脚本 中 判断 元 素 的 getContext0 方 法 是 否 存 在 ， 判 断代 码 如 下 : 


var canvas = document .getElementById ("myCanvas"); 
if (canvas.getContext) { 


alert ("您 的 浏览 器 不 支持 canvas 元 素 ") ; 
} else { 

alert ("您 的 浏览 器 支持 canvas 元 素 "); 
} 


3 . try-catch 语句 


在 脚本 中 使 用 try-catch 语句 也 可 以 判断 浏览 器 对 canvas 元 素 的 支持 情况 ，try 语句 块 SN 
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中 直接 获取 上 下 文 对 象 ， 获 取 过 程 中 出 现 异常 时 ， 直 接 抛 出。 代码 如 下 : 


try { 

document .createElement ("myCanvas") .getContext ("2d"); 

document .getElementById ("support") .innerHTML= "您 的 浏览 器 支持 canvas 元 素 "; 
} catch (e) { 

document .getElementById ("support") .innerHTML = "您 的 浏览 器 不 支持 canvas 元 素 "; 
} 


8.2 绘制 文本 


canvas 画布 提供 了 一 个 用 来 作 图 的 平面 空间 ， 该 空间 的 每 个 点 都 有 自己 的 坐标 ，x 表 
示 横 坐标 ，y 表示 纵 坐 标 。 原 点 (0，0) 位 于 图 像 左 上 角 ，x 轴 的 正 向 是 原点 向 右 ，y 轴 的 正 
向 是 原点 向 下 。 

无 论 是 绘制 文本 ， 还 是 绘制 其 他 图 形 ， 如 果 不 指 定 坐标 ， 就 都 从 坐标 原点 (0，0) 开 始 
绘制 。 文 本 是 用 户 最 经 常见 到 的 内 容 ， 通 过 上 下 文 对 象 提供 的 属性 和 方法 可 以 绘制 出 指定 
的 文本 信息 ， 本 节 将 向 读者 介绍 如 何 绘制 文本 。 


621 绘制 普通 文本 


绘制 文本 时 需要 使 用 到 上 下 文 对 象 中 的 属性 和 方法 ， 通 过 属性 可 以 设置 文本 的 字体 样 
式 和 对 齐 方式 等 信息 ， 常 用 的 3 个 属性 说 明 如 下 所 示 。 
e@ ”font: 设置 或 返回 文本 内 容 的 当前 字体 。 
etextAlign: 设置 或 返回 文本 内 容 的 当前 对 齐 方式 ， 其 属性 值 可 以 是 start( 默 认 
值 )、end、right 和 center。 
@ textBaseline: 设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 ， 其 属性 值 可 以 是 
top、hanging、middle、alphabetic、ideographic( 默 认 值 ) 和 bottom。 
Web 开发 者 可 以 通过 3 种 方法 绘制 文本 ， 这 3 种 方法 的 说 明 如 下 所 示 。 
e@ flText0: 该 方法 在 画布 上 绘制 “被 填充 的 ”文本 。 
@ strokeText0: 该 方法 在 画布 上 绘制 文本 (无 填充 )。 
@ ”measureText(): 该 方法 返回 包含 指定 文本 宽度 的 对 象 。 
fillText0 方 法 在 画布 上 绘制 “被 填充 的 ”文本 ， 而 strokeText0 方 法 直接 在 画布 上 绘制 
无 填充 的 文本 。 这 两 个 方法 都 包含 4 个 参数 ， 参 数 说 明 都 一 样 。 以 fillText0 方 法 为 例 ， 基 
本 语法 如 下 : 


context .fillText (text, x, y, maxWidth); 


在 上 述 语法 中 ，text 参数 指定 在 画布 上 输出 的 文本 ; x 表示 开始 绘制 文本 的 x 坐标 位 
置 (相对 于 画布 ); y 表示 开始 绘制 文本 的 y 坐标 位 置 (相对 于 画布 ); maxWidth 是 一 个 可 选 
参数 ， 指 定 允 许 的 最 大 文本 宽度 ， 单 位 是 像素 。 

measureText( 方 法 返回 一 个 对 象 ， 该 对 象 包含 以 像素 指定 的 字体 宽度 。 如 果 需 要 在 文 
本 向 画布 输出 之 前 就 了 解 文本 的 宽度 ， 那 么 可 以 使 用 该 方法 。 该 方法 的 语法 如 下 : 


context .measureText (text) .width; 


在 上 述 语法 中 ， 使 用 measureText() 方 法 时 需要 传 入 一 个 text 参数 ， 该 参数 表示 要 测量 
的 文本 。 
【 例 8.1】 
向 HTML 网 页 中 添加 代码 显示 一 首 古诗 ， 标 题 通过 strokeText() 方 法 绘制 ， 内 容 则 通 
过 filText() 方 法 进行 绘制 。 完 整 的 实现 步骤 如 下 。 
在 HTML 页 面 的 合适 位 置 添加 canvas 元 素 ， 并 指定 其 宽度 、 高 度 和 唯一 标 
识 ID 属性 。 代 码 如 下 : 
<canvas id="MyCanvas"” width="720"” height="300"> 当 前 浏览 器 不 支持 canvas 元 素 
</canvas> 
页 面 加 载 时 绘制 古诗 标题 、 作 者 和 内 容 ， 通 过 JavaScript 代码 为 页 面 指定 
load 事件 ， 首 先 绘制 古诗 标题 。 代 码 如 下 : 


window.onload = function(){ 
var title = "将 进 酒 "; 
Var canvas = document .getElementById ("MyCanvas"); 
if(canvas.getContext){ 


var context = canvas.getContext ("2d"); // 获 取 上 下 文 对 象 
context.font = "bold 30px sans-serif"; // 设 置 字体 样式 

Context. strokeStyle = "red"; // 设 置 笔触 的 颜色 
context .strokeText (title, 250, 30); / /绘制 无 填充 文本 


// 省 略 其 他 绘制 内 容 
} 
h 


继续 向 上 个 步骤 的 脚本 代码 中 添加 新 代码 ， 指 定 古 诗作 者 ， 通 过 fillText0 
方法 绘制 作者 文本 ， 并 且 重 新 指定 字体 样式 、 填 充 颜色 和 文本 基线 等 内 容 。 代 码 
如 下 : 


context.font = "italic 18px sans-serif"; 
context .fillstyle = "blue"; 

Context .textBaseline = "bottom"; 

context .fillText (" (作者 : 李白 ) ", 340, 30); 


继续 向 前 面 的 代码 后 添加 绘制 古诗 内 容 的 文本 ， 指 定 文本 的 大 小 是 18 像 
素 ， 字 体 样式 是 “隶书 ”， 填 充 颜色 是 4404040。 代 码 如 下 ; 


context .font = "18px 隶书 "; 

Context.fil1Style = "#404040"; 

context .fillText (" 君 不 见 ， 黄 河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。", 160, 70); 
context .fillText (" 君 不 见 ， 高 堂 明镜 翡 白 发 ， 朝 如 青丝 暮 成 雪 。", 160, 90); 
context .fillText (" 人 生得 意 须 尽 欢 ， 莫 使 金 覃 空 对 月 。", 160, 110); 
context .fillText (" 天 生 我 材 必 有 用 ， 千 金 散 尽 还 复 来 。", 160, 130); 
context .fill1Text (" 烹 羊 字 牛 且 为 乐 ， 会 须 一 饮 三 百 杯 。" ,160,150) 
context .fillText (" 岑 夫子 ， 丹 后 生 ， 将 进 酒 ， 杯 莫 停 。" ,160,170) 
context .fillText (" 与 君 歌 一 曲 ， 请 君 为 我 倾 耳 听 。" ,160,190) ; 

context .fillText (" 钟 鼓 蚀 玉 不 足 贵 ， 但 愿 长 醉 不 复 醒 。", 160, 210); 
context .fillText ("古来 圣贤 皆 寂 寞 ,惟有 饮 者 留 其 名 。", 160, 230); 
context .fillText (" 陈 王 昔 时 宴 平 乐 ， 斗 酒 十 千 盗 欢 读 。" ,160,250); 
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context .fillText (" 主 人 何 为 言 少 钱 ， 径 须 沽 取 对 君 酌 。" ,160, 270) ; 
context .fillText (" 五 花 马 ， 千 金 豆 ， 呼 儿 将 出 换 美 酒 ， 与 尔 同 销 万 古 悉 。",160,290) ; 


运行 上 述 代码 ， 查 看 绘制 文本 的 效果 ， 如 图 8-2 所 示 。 
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将 进 酒 “4z #5) 
君 不 见 ， 黄 河 之 水 天 上 来 ， 适 流 到 海 不 皇 回 
击 不 见 ， 高 尝 明 镜 起 白 八 ， 朝 如 青丝 辐 成 四 。 
人 和 尘 得 恺 斋 尽 次 ， 甘 使 会 楷 完 对 月 ， 
天 灶 我 村 尖 有 有 用， 千金 到 尽 还 复 未 ， 


五 花 马 ， 千 全 家 ， 哮 儿 将 出 挨 业 注 ， 与 汞 同 销 万 古 苞 。 


图 8-2 绘制 文本 


在 例 8.1 中 使 用 到 了 fillstyle 属性 和 strokeStyle 属性 ， 这 两 个 属性 在 后 面 小 节 中 会 经 
常 被 使 用 。fillStyle 属性 设置 或 返回 用 于 填充 绘画 的 颜色 、 渐 变 或 模式 ， 属 性 的 默认 值 是 
#000000。 基 本 语法 如 下 : 


context .fillstyle = color | gradient | pattern; 


从 上 述 代码 中 可 以 看 出 ，fillSstyle 属性 的 值 可 以 有 color、gradient 和 pattern 三 种 。 
@ “color: 指定 绘图 填充 色 的 CSS 颜色 值 ， 默 认 值 是 #000000。 其 值 可 以 是 十 六 进 制 
颜色 ， 也 可 以 是 颜色 合法 的 英文 名 称 。 
e@ ”gradient: 用 于 填充 绘图 的 渐变 对 象 (线性 或 者 径 向 )。 
e patterm: 用 于 填充 绘图 的 pattem 对 象 。 
strokeStyle 属性 设置 或 返回 用 于 笔触 的 颜色 、 渐 变 或 者 模式 ， 其 属性 值 是 #000000。 该 
属性 的 取 值 有 3 种 ， 这 些 值 的 意义 与 fillStyle 属性 值 的 意义 一 样 。 基 本 语法 如 下 : 


context.strokeStyle = color | gradient | pattern; 


22 绘制 阴影 文本 


上 下 文 对 象 提供 了 一 系列 与 阴影 有 关 的 属性 ， 通 过 这 些 属性 ， 不 仅 可 以 绘制 文本 的 阴 
影 效 果 ， 还 可 以 绘制 图 形 (例如 圆 形 和 扇形 ) 的 阴影 效果 。 例 如 ， 表 8-1 列 出 了 上 下 文 对 象 
提供 的 阴影 属性 。 

在 表 8-1 列 出 的 属性 中 ，shadowOffsetX 和 shadowOffsetY 用 于 设置 在 x 和 y 轴 的 延伸 
距离 ， 它 们 不 受 变换 矩阵 的 影响 。 为 这 两 个 属性 设 为 负 值 时 ， 表 示 阴 影 向 上 或 向 左 延 伸 ， 
正 值 则 表示 向 下 或 向 右 延 伸 ， 它 们 的 默认 值 都 为 1。 

【 例 8.2】 
在 上 个 示例 的 基础 上 添加 阴影 属性 ， 分 别 绘制 古诗 标题 、 古 诗作 者 和 古诗 内 容 的 文本 


a 
第 
阴影 。 sy 
本 
表 8-1 上 下 文 对 象 提供 的 阴影 属性 到 
属性 名 称 说 明 
ete it 设置 或 返回 用 于 阴影 的 颜色 。 默 认 值 为 全 透明 的 黑色 ， 它 的 值 可 以 是 标准 的 扣 
CSS 颜色 值 页 
rir 设置 或 返回 用 于 阴影 的 模糊 级 别 ， 默 认 值 为 1。 其 属性 值 必须 为 比 0 大 的 数字 ， 
它 的 值 一 般 在 0-10 之 间 ， 否 则 将 会 被 忽略 形 


shadowOffsetX 设置 或 返回 阴影 距 图 形 的 水 平 距离 。 也 可 以 理解 为 阴影 与 图 形 的 横向 位 移 量 
shadowOffsetY 设置 或 返回 阴影 距 图 形 的 垂直 距离 。 也 可 以 理解 为 阴影 与 图 形 的 纵向 位 移 量 


实现 步 又 如 下 。 
在 JavaScript 脚本 中 绘制 标题 文本 ， 在 绘制 之 前 分 别 设置 阴影 颜色 、 模 糊 
级 别 以 及 横向 和 纵向 位 移 量 。 代 码 如 下 : 


context.font = "bold 30px sans-serif"; 


context .strokeStyle = "red"; 

context .shadowColor = "blue"; // 阴 影 颜 色 
context.shadowBlur = 1; // 阴 影 模 糊 级 别 ， 这 里 指定 为 1 
context.shadowOffsetX = 2; // 横 向 位 移 量 2 

context .shadowOffsetY = -2; // 纵 向 位 移 量 -2 

Context . strokeText (title,250,30) // 绘 制 标题 文本 


找到 绘制 古诗 作者 时 的 文本 ， 并 且 分 别 指定 shadowColor、shadowBlur、 
shadowOffsetX 和 shadowOffsetY 的 属性 值 。 部 分 代码 如 下 : 


context.shadowColor = "#EE1289"; // 设 置 阴 影 颜色 
context .shadowBlur = 2; // 阴 影 模糊 级 别 ， 这 里 指定 为 2 
context.shadowOffsetX = -2; // 横 向 位 移 量 -2 
context.shadowOffsetY = 2; // 纵 向 位 移 量 2 


context .fillText ("( 作 者: 李白 )",340, 30) 7 
在 绘制 古诗 作者 之 后 、 古 诗 内 容 之 前 重新 指定 阴影 效果 。 部 分 内 容 如 下 : 


Context .shadowColor = "#43CD80"; // 设 置 阴影 颜色 
context .shadowBlur = 3; // 阴 影 模糊 级 别 ， 这 里 指定 为 3 
Context.shadowOffsetX = -2; // 横 向 位 移 量 -2 
Context.shadowOffsetY = -2; // 纵 向 位 移 量 -2 


context .fillText (" 君 不 见 ， 黄 河 之 水 天 上 来 ， 奔 流 到 海 不 复 回 。" ,160,70) ; 
在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 文 本 的 阴影 效果 如 图 8-3 所 示 。 


«oe 
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图 8-3 绘制 阴影 文本 


8.3 绘制 矩形 


上 下 文 对 象 提供 了 一 系列 绘制 矩形 的 方法 ， 通 过 这 些 方法 ， 可 以 绘制 不 同 的 矩形 ， 下 
面 将 介绍 这 些 方法 ， 并 且 分 别 通过 这 些 方法 来 绘制 矩形 。 


G31 用 rect() 方 法 绘制 


调用 上 下 文 对 象 的 方法 绘制 矩形 时 涉及 到 4 个 方法 ， 它 们 分 别 是 rect0 方 法 、fillRect0 
方法 、strokeRect() 方 法 以 及 clearRect( 方 法 。 下 面 ， 首 先 对 rect0 方 法 进行 介绍 。 

rect( 方 法 用 于 创建 矩形 ， 创 建 完毕 后 需要 调用 stroke() 方 法 或 者 fil0 方 法 在 画布 上 实 
际 地 绘制 图 形 。 简 单 地 说 ，rect(0 绘 制 的 矩形 不 会 在 画布 上 显示 ， 如 果 要 显示 ， 则 需要 调用 
stroke() 方 法 或 者 fill0 方 法 。rect0 方 法 的 基本 语法 如 下 : 

context.rect (x,y,width, height); 


在 上 述 方法 中 ，rect() 方 法 需要 传 入 4 个 参数 : x 参数 表示 矩形 左上 角 的 x 坐标 ; y 参 
数 表 示 和 矩形 左上 角 的 y 坐标 ; width 参数 指定 矩形 的 宽度 ，height 参数 指定 矩形 的 高 度 ， 这 
两 个 参数 的 单位 是 像素 。 

【 例 8.3】 

在 例 8.2 代码 的 基础 上 添加 新 的 代码 ， 通 过 rect( 方 法 绘制 矩形 ， 并 且 分 别 通过 调用 
stroke() 方 法 和 fill0) 方 法 在 画布 上 显示 。 找 到 绘制 文本 时 的 JavaScript 脚本 代码 ， 在 创建 上 
下 文 对 象 之 后 ， 调 用 rect0 方 法 创建 一 个 宽度 为 720 像素 、 高 度 为 300 像素 的 矩形 ， 然 后 再 
调用 stroke() 方 法 绘制 矩形 。 部 分 代码 如 下 : 


window.onload = function(){ 
var title = "将 进 酒 "; 
Var canvas = document.getElementById ("MyCanvas"); 
if(canvas.getContext){ 


var context = canvas.getContext ("2d"); // 获 取 上 下 文 对 象 
context.rect (0,0,720, 300); // 绘 制 矩 形 
context.stroke (); // 通 过 stroke () 方 法 绘制 已 定义 的 路 径 
// 省 略 其 他 内 容 


} 
} 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 8-4 所 示 。 


图 8-4 用 stroke() 方 法 向 画布 绘制 矩形 
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重新 更 改 上 述 代码 ， 通 过 rect0 方 法 绘制 矩形 完毕 后 ， 通 过 fill0 方 法 填充 当前 绘图 路 
径 ， 默 认 情 况 下 填充 颜色 为 黑色 ， 如 果 要 更 改 填 充 颜色 ， 则 需要 通过 fnlStyle 属性 。 更改 
代码 如 下 : 


Context .rect (0,0,720,300); 
Context .fil1lStyle = "#FAFOE6"; 
context .fil]l (); 


重新 刷新 网 页 ， 查 看 效果 ，fill0 方 法 绘制 矩形 的 效果 如 图 8-5 所 示 。 


se 
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将 进 独 -zz ro) 


洪 不 见 ， 黄 汕 亿 水 天 上 来， 办 六 到 海 不 生 三 ， 
着 不见， 南 案 明艳 马 白 未 ， 朝 加 入 外 各 不 攻 


二 人 阿 为 去 少 胜 ， 认 天 法 到 对 汝 加- 
王 状 蕊 ， 平 全 表 ， 入 天 将 宇 除 关 当 ， 滞 东 基 销 万 兴起 


8-5 用 俩 (方法 向 画布 绘制 矩形 


32 用 仙 Rect( 方 法 绘制 


fillRect0 方 法 绘制 “被 填充 ”的 和 矩形， 默认 的 填充 颜色 是 黑色 。 开 发 者 可 以 使 用 
fillStyle 属性 来 设置 用 于 绘图 的 颜色 、 渐 变 或 者 模式 。fillRect0 方 法 的 基本 语法 如 下 : 


context .fillRect (x,y,vwidth, height); 


在 上 述 语法 中 ，flIRectO 方 法 绘制 矩形 时 需要 传 入 4 个 参数 。x 参数 绘制 矩形 左上 角 的 
x 坐标 ; y 参数 绘制 矩形 左上 角 的 y 坐标 ，width 和 height 则 分 别 表示 矩形 的 宽度 和 高 度 ， 
以 像素 为 单位 。 
【 例 8.4】 
filIRect0 方 法 的 效果 与 rect0 绘 图 完毕 后 通过 fil10 方 法 填充 时 的 效果 一 致 。 例 如 ， 通 过 
fillRect0 方 法 显示 图 8-5 中 的 效果 。 代 码 如 下 : 
window.onload = function(){ 
var title = "将 进 酒 "; 
Var canvas = document .getElementById("MyCanvas"); 


if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 


context.fillStyle = "#FAFOE6"; // 填 充 颜 色 
context .fillRect (0,0,720,300); // 直 接 绘 图 
// 省 略 其 他 内 容 


} 
} 


在 浏览 器 中 重新 运行 本 示例 的 代码 ， 查 看 效果 。 


3.3 用 strokeRect() 方 法 绘制 


strokeRect() 方 法 用 于 绘制 无 填充 矩形 ， 绘 制 时 笔触 的 默认 颜色 为 黑色 。 如 果 要 更 改 颜 
色 ， 需 要 通过 strokeStyle 属性 进行 设置 。strokeRect0 方 法 的 基本 语法 如 下 : 
context.strokeRect (x, y,width, height); 


从 上 述 语法 中 可 以 看 出 ，strokeRect() 方 法 的 参数 与 fillRect0 方 法 一 样 ， 其 含义 也 一 
样 。x 和 Yy 分 别 表示 矩形 左上 角 的 x 坐标 和 y 坐标 ，width 和 height 则 分 别 表示 和 矩形 的 宽度 
和 高 度 ， 单 位 是 像素 。 

【 例 8.5】 

strokeRect() 方 法 的 效果 与 rect0 绘 图 完毕 后 通过 stroke() 方 法 填充 时 的 效果 一 致 。 下 面 
更 改 例 8.4 的 代码 ， 通 过 strokeRect() 方 法 绘制 一 个 矩形 ， 并 且 指 定 矩 形 的 笔触 颜色 为 
本 FO00FF。 代 码 如 下 : 


window.onload = function(){ 
var title = "将 进 酒 "; 
Var canvas = document .getElementById ("MyCanvas"); 
if (canvas .getContext) { 
Var context = canvas.getContext ("2d"); 
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context.fillStyle = "#FAFOEG6"; // 填 充 颜 色 
context.strokeRect (0,0,720,300); // 直 接 绘图 
// 省 略 其 他 内 容 


} 
} 


在 浏览 器 中 运行 本 例 的 代码 ， 观 察 效果 ， 绘 制 的 矩形 如 图 8-6 所 示 。 
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卉 不 见 ， 费 河 之 水 天 大 来 ， 稼 区 到 海 不 入 加 
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入 委 得 筷 其 以 欢 ， 横 便 例 稀 完 对 月 
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误 症 坟 千 且 为 卫 ， 全 再 一 纪 三 百科 。 

故 尖 村， 着 正业， 将 过 下 ， 杯 要 从 。 

河 苟 软 一 物 ， 访 营 为 心 商 导 听 ， 

钙 获 全 玉 不 六 贵 ， 但 惠 长 鲜 不 委 肆 

证 来 本 要 时 租 奖 ， 丛 有 以 者 央 天 各 

除 至 莉 时 香干 乐 、 寸 油 十 千 隐 攻读 。 
主人 全 为 寺 少 钱 ， 径 珊 洁 取 对 污 四 。 

五 巷 马 、 干 鲍 表 ， 呼 人 将 出 独 关 证 、 避 东 中 销 万 古 起 - 


图 8-6 用 strokeRect() 方 法 绘制 矩形 


(8.3.4 用 clearRect() 方 法 清除 


上 下 文 对 象 提供 了 clearRect( 方 法 ， 用 来 清空 指定 矩形 内 的 指定 像素 。 使 用 clearRectO 
方法 时 需要 传 入 4 个 参数 : x 和 y 分 别 表示 要 清除 的 矩形 左上 角 的 x 坐标 和 y 坐标 ; width 
和 height 表示 要 清除 矩形 的 宽度 和 高 度 ， 以 像素 为 单位 。 


243 


©@ TM 5 与 CSS 3 网 页 设计 入 门 与 提高 


基本 语法 如 下 : 

context.clearRect (x,y,width,height); 

【 例 8.6】 

继续 在 前 面 的 示例 中 添加 代码 ， 首 先 通过 flIRect0 方 法 绘制 一 个 矩形 ， 然 后 清除 该 矩 
形 内 (150,50) 坐 标 处 长 度 为 400、 高 度 为 100 的 矩形 。 部 分 代码 如 下 : 


context .fil1Style = "#FFEFDB"; // 填 充 颜色 

context .fillRect (0,0,720,300); / /绘制 矩形 

context .clearRect (150, 50, 400,100); // 从 (120，50) 坐标 处 清除 长 度 为 400、 高 度 为 

100 的 矩形 

在 浏览 器 中 运行 本 次 示例 的 代码 ， 查 看 效果 ， 使 用 clearRect() 方 法 的 清空 效果 如 图 8-7 
所 示 。 
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隔 王 普 时 硬 平 长 ， 寸 汀 十 焉 惠 玫 圭 、 
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8-7 clearRect() 方 法 的 使 用 


84 绘制 路 径 


上 下 文 对 象 提供 了 一 系列 与 路 径 有 关 的 方法 ， 使 用 这 些 方法 可 以 创建 复杂 的 形状 和 线 
条 。 在 前 面 示例 中 使 用 到 的 fl0 方 法 和 stroke() 方 法 都 与 路 径 有 关 ， 除 了 这 些 方法 外 ， 还 
有 其 他 的 一 些 路 径 方法 。 

下 面 将 使 用 路 径 有 关 的 方法 绘制 图 形 ， 包 括 简单 的 线条 (例如 线段 、 三 角形 ) 和 复杂 的 
形状 (例如 不 规则 的 多 边 形 ) 等 内 容 。 


(8.4.1 路 径 绘图 方法 


在 绘图 之 前 ， 首 先 了 解 一 下 常用 的 路 径 绘图 方法 ， 这 些 方法 及 其 说 明 如 表 8-2 所 示 。 

在 表 8-2 中 ， 绘 制 路 径 图 形 开始 时 会 调用 beginPath() 方 法 创建 路 径 ， 绘 制 结束 时 调用 
closePath() 方 法 关闭 路 径 。 如 果 画 完 前 面 的 路 径 没 有 重新 指定 beginPath() 方 法 ， 那 么 画 其 他 
路 径 的 时 候 会 将 前 面 最 近 指 定 的 beginPathO 后 的 全 部 路 径 重 新 绘制 。 另 外 ， 每 次 调用 
context.fill0 方 法 时 会 自动 把 当 次 绘制 的 路 径 的 开始 点 和 结束 点 相连 ， 接 着 填充 封闭 部 分 。 


表 8-2 上下文 对 象 提供 的 路 径 绘图 方法 
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方法 名 称 说 明 
fl0 填充 当前 绘图 路 径 
stroke0 绘制 已 定义 的 路 径 
beginPath 起 始 一 条 路 径 ， 或 者 重 置 当 前 路 径 
moveTo0 把 路 径 移 动 到 画布 中 的 指定 点 ， 不 创建 线条 
closePath 创建 从 当前 点 回 到 起 始点 的 路 径 
lineTo0 添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 指定 点 的 线条 
clip0 从 原始 画布 剪 切 任意 形状 和 尺寸 的 区 域 
uadraticCurveTo 创建 二 次 贝 塞 尔 曲 线 
bezierCurveTo 创建 三 次 方 贝 塞 尔 曲线 
arc0 创建 弧 /曲线 (用 于 创建 圆 形 或 部 分 圆 ) 


arcTol 创建 两 切线 之 间 的 弧 / 曲 线 
isPointInPathO 如 果 指 定 的 点 位 于 当前 路 径 中 ， 则 返回 tue， 和 否则 返回 false 


上 下 文 对 象 在 调用 表 8-2 中 的 方法 绘图 时 ， 还 可 能 使 用 到 一 些 线条 样式 属性 ， 这 些 属 
性 及 其 说 明 如 表 8-3 所 示 。 


表 8-3 线条 样式 属性 


属性 名 称 说 明 

lineCap 设置 或 者 返回 线条 的 结束 端点 样式 ， 其 属性 值 有 3 个 ， 说 明 如 下 。 
butt: 默认 值 ， 向 线条 的 每 个 末端 添加 平 直 的 边缘 。 
round: 向 线条 的 每 个 末端 添加 圆 形 线 帽 。 
square: 向 线条 的 每 个 末端 添加 正方 形 线 帆 

lineJoin 设置 或 者 返回 两 条 线 相交 时 所 创建 的 拐角 类 型 ， 其 属性 值 有 3 个 ， 说 明 如 下 。 
bevel: 创建 斜 角 。 
round: 创建 圆 角 。 
miter: 默认 值 ， 创 建 尖 角 

lineWidth 设置 或 返回 当前 的 线条 宽度 。 单 位 是 像素 

miterLimit 设置 或 返回 最 大 斜 接 长 度 。 斜 接 长 度 是 指 在 两 条 线 交汇 处 内 角 和 外 角 之 间 的 距 


离 。 只 有 当 lineJoin 属性 的 值 为 miter 时 ，miterLimit 才 有 效 。 边 角 的 角度 越 小 ， 斜 
接 长 度 就 会 越 大 。 如 果 斜 接 长 度 超过 miterLimit 的 值 ， 边 角 会 以 lineJoin 的 bevel 
类 型 显示 


€42 绘制 基本 图 形 


本 节 的 基本 图 形 是 指 线段 和 三 角形 ， 这 两 种 图 形 的 实现 都 很 简单 ， 主 要 涉及 到 
moveTo() 方 法 和 lineTo() 方 法 。moveTo(0) 方 法 在 使 用 时 需要 传 入 两 个 参数 : 第 一 个 参数 表 
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示 路 径 的 目标 位 置 的 x 坐标 ， 第 二 个 参数 表示 路 径 的 目标 位 置 的 y 坐标 。 基 本 语法 如 下 : 
context .moveTo (x, y); 
lineTo() 方 法 添加 一 个 新 点 ， 然 后 创建 从 该 点 到 画布 中 最 后 指定 点 的 线条 。 需 要 注意 的 
是 : 该 方法 并 不 会 创建 线条 。 使 用 lineTo0 方 法 时 也 需要 传 入 两 个 参数 ， 这 两 个 参数 的 意 
义 与 moveTo0 方 法 一 致 。 基 本 语法 如 下 : 


context.lineTo (x, y); 


【 例 8.7】 
本 例 通过 moveTo0 方 法 和 lineTo0 方 法 绘制 了 一 条 宽度 为 3 的 线段 。 代 码 如 下 : 


Var canvas = document .getElementById ("MyCanvas"); 
var context = canvas.getContext ("2d"); 


context .beginPath (); // 开 始 绘图 路 径 
context .moveTo (30, 30); // 起 始 位 置 
context.lineTo (200,30); // 目 标 坐 标 
context.lineWidth = 3; // 线 条 宽度 
context .closePath (); // 关 闭路 径 


context .stroke (); 


可 以 在 一 个 画布 中 绘制 多 个 线条 ， 在 绘制 时 ， 需 要 重新 通过 beginPath() 方 法 指定 绘图 
路 径 。 例 如 ， 重 新 在 上 个 代码 的 基础 上 添加 以 下 代码 ， 这 段 代 码 表示 重新 绘制 一 条 宽度 为 
5 的 线段 : 

context .beginPath (); 

context.strokeStyle = "red"; 

context.lineWidth = 5; 

context .moveTo (100,100); 

context.lineTo(150,150); 

context .closePath (); 

context .stroke (); 

除了 绘制 基本 的 线条 外 ， 还 可 以 通过 多 个 lineTo0 方 法 绘制 三 角形 、 和 矩形 和 多 边 形 
等 。 其 中 ， 三 角形 最 常 被 绘制 ， 和 矩形 可 以 通过 rect() 等 方法 绘制 。 

【 例 8.8】 

在 本 例 中 绘制 两 个 三 角形 ， 第 一 个 三 角形 通过 stroke0 方 法 绘制 ， 第 二 个 三 角形 通过 
fl0 方 法 绘制 ， 填 充 颜色 为 黄色 ， 并 为 该 图 形 添加 阴影 效果 。 实 现 步骤 如 下 。 

国 呈 01| 向 HTML 网 页 中 添加 canvas 元 素 ， 并 且 指 定 该 元 素 的 宽度 为 720 像素 ， 高 

度 为 150 像素 。 
向 JavaScript 脚本 中 添加 代码 ， 首 先 创 建 第 一 个 三 角形 ， 指 定 宽度 为 3 像 
素 ， 笔 触 颜色 为 蓝 色 。 代 码 如 下 : 


window.onload = function()1{ 
Var canvas = document .getElementById("MyCanvas"); 
if(canvas.getContext){ 
Var context = canvas.getContext ("2d"); 


context .beginPath(); // 开 始 绘图 路 径 
context.lineWidth = 3; 
Context. strokeStyle = "Blue"; 


context .moveTo (30,30) // 起 始 位 置 
context.lineTo (150, 30); // 目 标 坐 标 
context.lineTo(250,100); // 目 标 坐 标 
context.closePath(); // 关 闭路 径 
Context- stroke () // 绘 图 

// 省 略 其 他 内 容 


} 


国事 03] 在 上 述 代码 的 基础 上 继续 添加 代码 ， 指 定 填充 颜色 为 蓝 色 ， 阴 影 效果 为 蓝 
色 ， 模 糊 路 径 为 10。 相 关 代码 如 下 : 
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context .beginPath () // 开 始 绘图 
context .fillStyle = "yellow"; // 填 充 颜 色 
Context. shadowColor = "blue"; 


context.shadowBlur = 10; 
context .shadowOffsetX= -3; 
context.shadowOffsetY = -3; 


context .moveTo (350, 30); // 起 始 坐标 
context.lineTo(350,100); // 目 标 坐 标 
context.lineTo(600,75); 

context .closePath (); // 关 闭路 径 


context .fill (); 
在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 8-8 所 示 。 
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8-8 绘制 三 角形 


8.4.3 绘制 圆 形 和 扇形 
绘制 圆 形 和 扇形 时 ， 使 用 arc( 方 法 创建 弧 /曲线 ， 或 者 圆 形 和 扇形 。 创 建 圆 形 时 ， 需 要 


把 起 始 角 设置 为 0， 结 束 角 设置 为 25Math.PI。arc0 方 法 的 基本 语法 如 下 : 


context .arc (x, y, r,sAngle,eAngle, counterclockwise); 


在 使 用 arc0 方 法 时 需要 传 入 多 个 参数 : x 和 y 表示 圆 的 中 心 的 x 坐标 和 y 坐标 ; r 表 


示 圆 的 半径 ; sAngle 和 eAngle 分 别 表示 以 弧度 为 单位 的 起 始 角 和 结束 角 ; 
counterclockwise 是 一 个 可 选 参数 ， 指 定 应 该 逆 时 针 绘 图 还 是 顺 时 针 绘 图 。 将 它 的 值 设 置 为 
false( 默 认 值 ) 时 表示 顺 时 针 绘 图 ， 设 置 为 true 时 表示 逆 时 针 。 


简单 地 说 ， 使 用 arc0 方 法 绘图 时 ，x 和 y 决定 中 心 角 的 位 置 ，sAngle 决定 起 始 角 的 位 


置 ，eAngle 决定 结束 角 的 位 置 。 
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【 例 8.9】 
本 例 通过 arc0 方 法 创建 弧 、 圆 形 和 扇形 等 图 形 ， 并 且 通过 stroke0 方 法 和 名 10 向 画布 
绘制 。 实 现 步骤 如 下 。 
向 HTML 网 页 中 添加 长 度 为 720 像素 、 高 度 为 350 像素 的 canvas 元 素 。 
向 JavaScript 脚本 中 添加 代码 ， 首 先 通过 arc() 方 法 顺 时 针 方 向 绘图 ， 坐 标 
原点 是 (100，100)， 半 径 是 100， 起 始点 为 0， 结束 点 为 60。 代 码 如 下 : 


<script> 
window.onload = function(){ 
Var canvas = document .getElementById ("MyCanvas"); 
if(canvas.getContext){ 
Var context = canvas.getContext ("2d"); 


context .beginPath(); // 开 始 绘图 路 径 
context.arc(100,100,50,0,Math.PI/3); 
context .closePath(); // 关 闭路 径 
context.stroke (); // 绘 图 
// 省 略 其 他 代码 
} 
} 
</script> 


在 上 个 步骤 的 基础 上 继续 添加 脚本 代码 ， 把 用 arc0 方 法 绘图 时 指定 的 坐标 
原点 更 改 为 300.50)， 半 径 、 起 始 角 、 结 束 角 不 发 生 改 变 ， 但 是 要 求 逆 时 针 方向 
绘图 ， 这 里 不 给 出 代码 。 

添加 脚本 代码 ， 通 过 fl0 方 法 向 画布 绘图 ，arc( 方 法 绘图 时 坐标 原点 是 
(500，100)， 半 径 是 50， 起 始 角 是 Math.PL6， 结 束 角 是 Math.PI*1.5。 绘 制 代 码 
如 下 : 

context .beginPath (); 

context.arc(500,100,50,Math.PI/6,Math.PI*1.5); 


context .closePath (); 
context .fil]l (); 


参考 上 个 步骤 中 的 代码 ， 继 续 通过 arc0 绘 图 ， 绘 图 时 指定 的 坐标 原点 是 
(100，250)， 半 径 、 起 始 角 和 结束 角 不 变 ， 但 是 需要 指定 逆 时 针 方向 绘图 。 

分 别 通过 stroke0 方 法 和 fil0 方 法 绘制 空心 圆 形 和 实心 圆 形 ， 空 心 圆 形 的 笔 
触 颜色 和 实心 圆 形 的 填充 颜色 一 致 ， 均 为 rgba(0.255.0.0.25)。 以 空心 圆 形 为 例 ， 
其 代码 如 下 : 


context .beginPath (); 

context .strokeStyle = 'rgba(0,255,0,0.25)"'; 
context .arc(300,250,50,0,Math.PI * 2); 
context .closePath (); 

context .stroke(); 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 8-9 所 示 。 
此 外 ， 可 以 使 用 arcTo0 方 法 在 画布 上 创建 介 于 两 个 切线 之 间 的 弧 / 曲 线 ， 使 用 stroke0 
方法 在 画布 上 绘制 确切 的 弧 。 
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图 8-9 arc() 方 法 的 使 用 


基本 语法 如 下 : 
context .arcTo (x1, yl1, x2, y2,r); 


上 述 语法 中 ，arcTo() 方 法 的 xl 和 yl 参数 表示 弧 的 起 点 的 x 坐标 和 y 坐标 ; x2 和 y2 
参数 表示 弧 的 终点 的 x 坐标 和 y 坐标 ; r 表示 弧 的 半径 。 
【 例 8.10】 
下 面 的 代码 演示 了 arcTo() 方 法 的 基本 使 用 : 


window.onload = function(){ 
var canvas = document .getElementById("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 
context .beginPath(); 
context .moveTo (20, 20); // 创建 开始 点 


context .lineTo (100,20); // 创建 水 平 线 
context.arcTo (150,20,150,70,50); // 创建 弧 
context.lineTo (150,120); // 创建 垂直 线 
context .stroke (); // 进行 绘制 


} 


8.4.4 ” 贝 塞 尔 曲 线 


计算 机 图 形 学 中 ， 曲 线 和 曲面 是 重要 的 组 成 部 分 ， 其 中 贝 塞 尔 曲线 是 目前 应 用 广泛 的 
曲线 之 一 。 上 下 文 对 象 提供 了 两 种 绘制 贝 塞 尔 曲线 的 方法 ， 它 们 分 别 是 quadraticCurveTo0 
方法 和 bezierCurveTo0 方 法 。 


1 . quadraticCurveTo0) 方 法 


quadraticCurveTo() 方 法 通过 使 用 表示 二 次 方 贝 塞 尔 曲线 的 指定 控制 点 ， 向 当前 路 径 添 
加 一 个 点 。 二 次 方 贝 塞 尔 曲线 需要 两 个 点 ， 第 一 个 点 是 用 于 二 次 贝 塞 尔 计算 中 的 控制 点 ， 
第 二 个 点 是 曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 的 最 后 一 个 点 ， 如 果 路 径 不 存在 ， 
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那么 需要 使 用 beginPath() 方 法 和 moveTo0 方 法 来 定义 开始 点 。quadraticCurveTo() 方 法 的 基 
本 语法 如 下 : 


context .quadraticCurveTo (cpx, cpy, xX, y); 


在 上 述 方法 中 ，quadraticCurveTo() 方 法 需要 传 入 4 个 参数 : cpx 和 cpy 表示 贝 塞 尔 控 
制 点 的 x 坐标 和 y 坐标 ，x 和 y 则 表示 结束 点 的 x 坐标 和 y 坐标 。 
【 例 8.11】 
下 面 的 代码 演示 了 quadraticCurveTo() 方 法 的 使 用 : 
window.onload = function(){ 
Var canvas = document.getElementById ("MyCanvas"); 
if(canvas.getContext){ 
Var context = canvas.getContext ("2d"); 
context .beginPath(); 
context .moveTo (20,20); 
context .quadraticCurveTo (20,100,200,20); 
context.stroke (); 
} 
} 
在 上 述 代 码 中 ，moveTo(20,20) 指 定 开始 点 ，quadraticCurveTo(20,100,200,20) 中 (20,100) 


指定 控制 点 ，(200,20) 指 定 结束 点 。 
2 . bezierCurveTo() 方 法 


bezierCurveTo() 方 法 通过 使 用 表示 三 次 贝 塞 尔 曲 线 的 指定 控制 点 ， 向 当前 路 径 添加 一 
个 点 。 三 次 贝 塞 尔 曲 线 需 要 三 个 点 : 前 两 个 点 是 用 于 三 次 贝 塞 尔 计算 中 的 控制 点 ， 第 三 个 
点 是 曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 的 最 后 一 个 点 ， 如 果 路 径 不 存在 ， 那 么 可 
使 用 beginPathO0 和 moveTo() 方 法 来 定义 开始 点 。bezierCurveTo() 方 法 的 基本 语法 如 下 : 


context .bezierCurveTo (cplx, cply, cp2x, cp2y, Xx, y); 


在 上 述 语法 中 ，bezierCurveTo0 方 法 需要 传 入 6 个 参数 : cplx 和 cply 分 别 表示 第 一 个 
贝 塞 尔 控制 点 的 x 坐标 和 y 坐标 ; cp2x 和 cp2y 分 别 表示 第 二 个 贝 塞 尔 控 制 点 的 x 坐标 和 y 
坐标 ; x 和 yy 分别 表示 结束 点 的 x 坐标 和 y 坐标 。 
【 例 8.12】 
下 面 的 代码 演示 了 bezierCurveTo() 方 法 的 使 用 : 


window.onload = function(){ 

Var canvas = document .getElementById("MyCanvas"); 

if(canvas.getContext){ 
Var context = canvas.getContext ("2d"); 
context .beginPath(); 
context .moveTo (20,20); 
context .bezierCurveTo (20,100,200,100,200,20); 
context.stroke();s } 


在 上 述 代 码 中 ，moveTo(20,20) 表 示 开 始点 ; bezierCurveTo(20,100,200,100,200,20) 中 的 
(20,100) 指 定 第 一 个 控制 点 ;，(200,100) 指 定 第 二 个 控制 点 ，(200,20) 指 定 结束 点 。 


8.5 图形 变换 和 组 合 


有 时 候 ， 用 户 要 求 开发 者 将 绘制 的 图 形 放大 或 者 缩小 ， 或 者 进行 旋转 ， 这 时 再 使 用 上 
面 的 方法 就 不 能 满足 这 些 要求 。 上 下 文 对 象 提 供 了 与 这 些 操作 有 关 的 方法 ， 它 们 分 别 是 
scale() 方 法 、rotate0 方 法 、translate() 方 法 、transform() 方 法 、setTransform() 方 法 。 


(8.5.1 图 形变 形 
图 形变 形 涉 及 到 图 形 的 平移 、 旋 转 和 缩放 操作 ， 因 此 ， 这 涉及 到 以 下 3 个 方法 。 
1 . 图 形 平移 


图 形 平移 时 需要 使 用 到 translate0 方 法 ， 该 方法 表示 重新 映射 画布 上 的 (0,0) 位 置 ，(0,0) 
即 坐 标 原点 。 该 方法 的 基本 语法 如 下 : 

context.translate (x, y); 

在 上 述 语 法 中 ， 使 用 translate0 时 需要 传 入 两 个 参数 ， 第 一 个 参数 表示 添加 到 水 平 坐标 
x 上 的 值 ， 即 坐标 原点 向 x 轴 方 向 平移 x， 第 二 个 参数 表示 添加 到 垂直 坐标 y 上 的 值 ， 即 
坐标 原点 向 y 轴 方 向 平移 y。 

【 例 8.13】 

下 面 首先 通过 fillRect0 方 法 在 (10,10) 坐 标 处 绘制 宽度 为 100 像素 、 高 度 为 50 像素 的 矩 
形 ， 然 后 平移 原点 坐标 到 (70,70)， 平 移 完毕 后 再 次 绘制 该 图 。 代 码 如 下 : 


window.onload = function(){ 
var canvas = document .getElementById("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 
context .fillRect (10,10,100,50); 
context.translate(70,70); 
context .fillRect (10,10,100,50); 


} 
} 


运行 上 述 代码 ， 查 看 平移 后 的 效果 。 需 要 注意 的 是 ， 再 次 绘制 新 的 矩形 时 ， 其 位 置 是 
从 (80，80) 开 始 绘制 的 。 

2 . 图 形 旋转 

rotate0 方 法 旋转 当前 的 图 形 。 基 本 语法 如 下 : 

context .rotate (angle); 

从 上 述 语 法 中 可 以 看 出 ， 使 用 rotate0 方 法 时 需要 传 入 一 个 表示 旋转 角度 的 参数 ， 其 单 


位 是 弧度 。 如 果 需 要 将 角度 转换 为 弧度 ， 可 以 使 用 degrees*Math.PL180 公式 进行 计算 。 例 
如 ， 如 果 需 要 旋转 5 度 ， 指 定 的 公式 是 5*Math.PL180。 默 认 情 况 下 ， 旋 转 的 方向 为 顺 时 针 


251 


未 贺 团 六 六 蒜 SANLH 需 8 由 4 


十 TM 5 与 CSS 3 网 页 设计 入 门 与 提高 
方向 


【 例 8.14】 
下 面 的 代码 演示 了 rotate0 方 法 的 使 用 : 
window.onload = function(){ 
Var canvas = document .getElementById ("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 
context.rotate (30*Math.PI/180); 
context .fillRect (300,20,100,50); 


} 
3 . 图 形 缩放 


图 形 缩放 是 指 图 形 的 缩小 或 放大 效果 ， 实 现 该 功能 时 需要 调用 scale0 方 法 。 如 果 对 图 
形 进 行 缩 放 ， 所 有 之 后 的 绘图 也 将 会 被 缩放 ， 定 位 也 会 被 缩放 。 例 如 ， 对 于 scale(2,2) 来 
说 ， 绘 图 时 将 定位 于 距离 画布 左上 角 两 倍 远 的 位 置 。scale0 方 法 的 基本 语法 如 下 : 


context.scale (scalewidth, scaleheight); 


从 上 述 语 法 中 可 以 看 出 ，scale0 方 法 使 用 时 需要 传 入 两 个 参数 ， 第 一 个 参数 表示 缩放 
当前 绘图 的 宽度 (1=100%，0.5=50%，2=200%， 依 次 类 推 )， 第 二 个 参数 表示 缩放 当前 绘图 
的 高 度 (1=100%，0.5=50%，2=200%， 依 次 类 推 )。 

【 例 8.15】 

绘制 矩形 ， 将 其 放大 到 200%， 然 后 再 次 绘制 矩形 。 代 码 如 下 : 


window.onload = function(){ 
var canvas = document .getElementById("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 
context .strokeRect (5,5,25,15); 
context .scale (2,2); 
context.strokeRect (5,5,25,15); 


} 
4 . 平移 、 旋 转 和 缩放 


一 般 情 况 下 ， 开 发 者 不 会 单独 地 使 用 一 个 变形 特效 ， 通 常会 将 两 个 或 三 个 变形 结合 
来 使 用 ， 例 如 同时 使 用 平移 和 旋转 特效 。 使 用 多 种 特效 时 ， 使 用 顺序 不 同 可 能 导致 画 出 的 
结果 也 会 有 所 不 同 ， 它 们 的 顺序 可 能 是 平移 、 旋 转 、 缩 放 ， 平 移 、 缩 放 、 旋 转 ， 缩 放 、 平 
移 、 旋 转 ， 缩放 、 旋 转 、 平 移 ， 旋转 、 平 黎 、 缩 放 ; 旋转、 缩放 、 平 移 。 

例如 ， 图 8-10 显示 了 坐标 轴 变 化 的 两 两 关系 图 。 其 中 ， 蓝 色 代 表 平 移 、 红 色 代 表 旋 
转 、 绿 色 代表 旋转 。 

【 例 8.16】 

本 示例 通过 调用 平移 、 旋 转 和 缩放 的 方法 绘制 一 个 不 规则 的 相对 比较 复杂 的 图 形 。 实 
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图 8-10 ”坐标 轴 两 两 关系 图 


加 01| 向 页 面 中 添加 宽度 为 720 像素 、 高 度 为 300 像素 的 canvas 元 素 。 
园田 02| 添加 JavaScript 脚本 代码 ， 使 用 三 种 坐标 变换 方式 绘制 图 形 。 代 码 如 下 : 


<script> 
window.onload = function(){ 
Var canvas = document.getElementById ("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 


context .fillstyle = "white"; // 填 充 颜 色 
context.fillRect (0, 0, 720, 300); / /绘制 矩形 
context.translate(380, 5); // 将 图 形 平移 
context.fillSstyle = "#6CA6CD"; // 填 充 颜 色 
for (var i=0; i<50; i++) { 
context .scale(0.95, 0.95); // 缩 放 
context .translate (35, 25); // 平 移 
context .rotate (Math.PI / 11); // 旋 转 
context .shadowColor = "red"; // 阴 影 颜色 
context .shadowBlur = 10; // 阴 影 模糊 路 径 
context .fillRect (0, 0, 100, 50); // 绘 制 矩形 
} 
} 
} 
</script> 


上 述 代码 首先 获取 页 面 中 的 canvas 元 素 ， 接 着 创建 上 下 文 对 象 ， 通 过 fillstyle 属性 和 
fllRectO 绘 制 一 个 宽度 为 720 像素 、 高 度 为 300 像素 的 矩形 ， 绘 制 完 毕 后 将 其 进行 平移 。 
然后 通过 for 语句 进行 循环 ， 以 此 进行 缩放 、 平 移 和 旋转 操作 ， 并 且 设 置 图 形 的 阴影 颜色 
和 模糊 路 径 ， 最 后 调用 包 IRect0 方 法 循环 绘制 宽度 为 100 像素 、 高 度 为 50 像素 的 矩形 。 
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区 绿 03| 在 浏览 器 中 运行 上 述 代码 ， 查 看 绘制 的 图 形 ， 如 图 8-11 所 示 。 
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图 8-11 三 种 变换 方式 绘图 


[小 #5 读者 可 以 交换 该 示 例 for 语 条 中 缩放 平移 和 六 放 的 代码 , 将 前 面 列 出 的 
6 种 顺序 一 一 进行 演示 ， 这 时 可 以 发 现 (平移 、 旋 转 、 缩 放 ) 与 (平移 、 缩 放 、 旋 转 ) 效 果 一 
样 ，( 缩 放 、 旋 转 、 平 移 ) 与 旋转、 缩放、 平移 ) 效 果 一 样 ， 因 此 ， 读 者 进行 实验 时 只 能 看 
到 4 种 结果 ， 其实 是 有 两 种 情况 被 覆盖 了 。 


52 矩阵 变换 


和 矩阵 变换 其 实 是 context 内 实现 平移 、 缩 放 和 旋转 的 一 种 机 制 。 它 的 主要 原理 是 矩阵 
相 乘 。 和 矩阵 变换 最 常用 的 一 种 方法 就 是 transform(0 方 法 ， 该 方法 替换 该 图 的 当前 转换 矩 
阵 。 基 本 语法 如 下 : 


context.transform(a,b,c,d,e,f); 


从 上 述 语法 可 以 看 出 ，transform0 方 法 使 用 时 需要 传 入 6 个 参数 : a 和 bb 分 别 表示 水 平 
缩放 绘制 和 水 平 倾斜 绘图 ，c 和 d 分 别 表 示 垂 直 倾斜 绘图 和 垂直 缩放 绘图 ，e 和 工分 别 表示 
水 平移 动 绘图 和 垂直 移动 绘图 。 

使 用 transform() 方 法 时 ， 画 布 上 的 每 个 对 象 都 拥有 一 个 当前 的 变换 矩阵 ， 该 方法 蔡 换 
当前 的 变换 矩阵 。 可 以 使 用 下 面 描述 的 矩阵 来 操作 当前 的 变换 矩阵 : 

在、 和 二 

QQ 大 

可 使 用 context.transform(1,0,0,1,x,y) 或 contex.transform(0,1,1,0,x,y) 代 蔡 translate(x,y) 方 
法 实现 平移 。 在 transform() 方 法 实现 平移 时 ， 前 4 个 参数 表示 不 对 图 形 进行 操作 ，x 和 y 
的 设置 分 别 表 示 将 坐标 原点 向 右 移动 e 个 单位 ， 并 向 下 移动 了 个 单位 。 

可 以 使 用 context.transform(x,0,0,y,0,0) 或 context.transform(0,y,x,0,0) 方 法 代 蔡 scale(x,y) 


方法 。 在 transform() 方 法 实现 缩放 时 ， 前 面 4 个 参数 表示 将 图 形 横向 扩大 或 缩小 x 倍 ， 纵 
向 扩大 或 缩小 y 倍 ， 最 后 两 个 参数 表示 坐标 原点 不 移动 。 
使 用 transform() 方 法 实现 旋转 时 要 比 实现 平移 和 缩放 复杂 ， 它 可 以 通过 两 种 设置 方式 
进行 实现 。 
(1) 第 一 种 方式 实现 旋转 ， 代 码 如 下 : 
context.transform( 
Math .cos (angle*Math .PI/180), 
Math.sin(angle*Math.PI/180), 
-Math.sin(angle*Math.PI/180), 


Math.cos (angle*Math.PI/180), 
0,0); 


(2) 第 三 种 方式 实现 旋转 ， 代 码 如 下 : 


context .transform( 
-Math.sin(angle*Math.PI/180), 
Math.cos (angle*Math.PI/180), 
Math.cos (angle*Math.PI/180), 
Math.sin(angle*Math.PI/180), 
OO)s 
在 上 述 两 种 方式 的 代码 中 ， 前 4 个 参数 利用 三 角 函 数 完整 旋转 ，angle 参数 表示 按照 顺 
时 针 旋 转 的 角度 ， 最 后 两 个 参数 指定 为 0， 表 示 坐 标 原点 不 发 生 改变 。 
【 例 8.17】 
首先 绘制 一 个 宽度 为 250 像素 、 高 度 为 100 像素 的 矩形 ， 其 填充 颜色 为 黄色 。 接 着 通 
过 transform() 方 法 添加 一 个 新 的 变换 矩阵 ， 再 次 绘制 矩形 ， 然 后 再 次 添加 一 个 新 的 变换 矩 
阵 后 绘制 矩形 。 这 时 ， 每 次 调用 transformn0 时 ， 它 都 会 在 前 一 个 变换 矩阵 上 构建 新 图 形 。 
实现 的 JavaScript 代码 如 下 : 
window.onload = function(){ 


Var canvas = document .getElementById ("MyCanvas"); 
if(canvas.getContext){ 


未 加 团 六 六 蒜 SANLH 需 8 溃 总 


var context = canvas.getContext ("2d"); // 创 建 上 下 文 对 象 
context.fil1Style = "yellow"; // 填 充 颜色 为 黄色 
context.fillRect (0,0,250,100) // 绘 制 矩形 
Context .transform(1,0.5,-0.5,1,30,10) // 变 换 矩 阵 
context .fillstyle = "red"; // 填 充 颜 色 为 红色 
context.fillRect (0,0,250,100); / /绘制 矩形 
context.transform(1,0.5,-0.5,1,30,10); // 变 换 矩 阵 
Context -fil1Style = "blue"; // 填 充 颜色 为 蓝 色 
context.fillRect (0,0,250,100); / /绘制 矩 形 


} 
} 


使 用 transform() 方 法 后 ， 接 着 要 绘制 的 图 形 都 会 按照 移动 后 的 坐标 原点 与 新 的 变换 矩 
阵 相 结合 的 方法 进行 重 置 ， 必 要 时 可 以 使 用 setTransform() 方 法 对 变换 矩阵 进行 重 置 。 
setTransform() 的 基本 语法 如 下 : 


context .setTransforml(a,b,c,d,e,f); 
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使 用 setTransform() 方 法 时 ， 需 要 传 入 6 个 参数 ， 这 些 参数 的 含义 与 transform() 方 法 一 
致 。 简 单 地 说 ，setTransform() 方 法 允许 开发 者 缩放 、 旋 转 、 平 移 并 倾斜 当前 的 环境 ， 该 变 
换 只 会 影响 setTransform() 方 法 调用 之 后 的 绘图 。 

【 例 8.18】 

绘制 一 个 矩形 后 通过 setTransform() 方 法 重 置 并 创建 新 的 变换 矩阵 ， 再 次 绘制 矩形 ， 重 
置 并 创建 新 的 变换 矩阵 ， 然 后 再 次 绘制 矩形 。JavaScript 实现 代码 如 下 : 


window.onload = function(){ 
Var canvas = document .getElementById ("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 


context .fillstyle = "yellow"; // 填 充 颜 色 为 黄色 
context.fillRect (0,0,250,100) /7 绘制 矩形 
context .setTransform(1,0.5,-0.5,1,30,10) 7 // 重 置 变换 矩阵 
context.fillStyle = "red"; // 填 充 颜 色 为 红色 
context.fillRect (0,0,250,100); / /绘制 矩形 
context.setTransform(1,0.5,-0.5,1,30,10); // 重 置 变换 矩阵 
Context.fil1Style = "blue"; // 填 充 颜色 为 蓝 色 
context.fillRect (0,0,250,100); // 绘 制 矩 形 


} 
} 


上 述 代码 在 每 次 调用 setTransform0 时 ， 它 都 会 重 置 前 一 个 变换 矩阵 ， 然 后 再 构建 新 的 
和 矩阵， 因此 在 本 示例 中 不 会 显示 红色 和 矩形， 因为 它 在 蓝 色 矩形 下 面 。 


5.3 图 形 组 合 


在 前 面 的 示例 中 ,使 用 上 下 文 对 象 可 以 将 一 个 图 形 重合 绘制 在 另 一 个 图 形 上 面 ， 但 是 
图 形 中 能 够 被 看 到 的 部 分 完全 取决 于 以 哪 种 方式 进行 组 合 ， 这 时 需要 使 用 图 形 组 合 技 术 。 
图 形 组 合 时 涉及 到 两 个 属性 : globalAlpha 和 globalCompositeOperation。 

1 . globalAlpha 属性 

globalAlpha 属性 设置 或 者 返回 绘图 的 当前 透明 值 (alpha 或 者 transparency)， 该 属性 值 
必须 是 介 于 0.0( 完 全 透明 ) 与 1.0( 不 透明 ) 默 认 值 之 间 的 数 。 基 本 语法 如 下 : 


context .globalAlpha = number; 


2 . globalCompositeOperation 属性 


globalCompositeOperation 属性 设置 或 者 返回 如 何 将 一 个 源 (新 的 ) 图 形 绘制 到 目标 (已 有 ) 
的 图 形 上 。 其 中 ， 源 图 形 是 指 Web 开发 者 打算 放置 到 画布 上 的 绘图 ， 目 标 图 形 是 指 已 经 放 
置 在 画布 上 的 绘图 。 基 本 语法 如 下 : 


context .globalCompositeOperation = type; 


为 globalCompositeOperation 属性 指定 属性 值 时 ， 该 属性 值 必须 是 表 8-4 中 的 一 种 类 型 。 


ce 


3 . 示例 应 用 


了 解 globalAlpha 和 globalCompositeOperation 两 个 属性 之 后 ， 下 面 通 过 一 个 示例 演示 
它们 的 使 用 及 其 实现 的 效果 。 


悄 图 团 习 人 广 蒜 TANLH 贡 8 洪 翅 
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表 8-4 globalCompositeOperation 属性 的 取 值 


属性 取 值 说 明 
source-Over 默认 值 ， 在 目标 图 形 上 显示 源 图 形 
source-Over 默认 设置 ， 表 示 新 图 形 会 覆盖 在 原 有 图 形 之 上 
destination-over 会 在 原 有 图 形 之 上 绘制 新 图 形 
source-in 新 图 形 会 仅仅 出 现 与 原 有 图 形 相 重 登 的 部 分 ， 其 他 区 域 都 变 成 透明 的 
destination-in 原 有 图 形 中 与 新 图 形 重 付 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 
source-out 只 有 新 图 形 中 与 原 有 内 容 不 重 苍 的 部 分 会 被 绘制 出 来 
destination-out 原 有 图 形 中 与 新 图 形 不 重合 的 部 分 会 被 保留 
source-atop 只 绘制 新 图 形 中 与 原 有 图 形 重 僵 的 部 分 。 未 被 重合 覆盖 的 原 有 图 形 ， 新 图 形 
的 其 他 部 分 变 成 透明 
destination-atop 只 绘制 原 有 图 形 中 被 新 图 形 重 倒 覆盖 的 部 分 。 新 图 形 的 其 他 部 分 ， 原 有 图 形 
中 的 其 他 部 分 变 成 透明 ， 不 绘制 新 图 形 中 与 原 有 图 形 相 重合 的 部 分 
lighter 两 图 形 中 重合 部 分 做 加 色 处 理 
darker 两 图 形 中 重合 的 部 分 做 减 色 处 理 
XOT 重合 的 部 分 会 变 成 透明 
cop 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 
【 例 8.19】 


本 例 根据 用 户 选 择 的 内 容 ， 设 置 图 形 的 组 合 效 果 。 实 现 步骤 如 下 。 
E 刘 01| 向 HTML 页 面 中 添加 12 个 单 选 按钮 ， 这 些 按钮 分 别 表示 不 同 的 组 合 类 
型 。 部 分 代码 如 下 : 


<input type="radio" name="cktype" value="source-over" checked />source-over 
&nbsp; gnbsp; <input type="radio" name="cktype" value="source-in" />source-in 
&nbsp; gnbsp; <input type="radio" name="cktype" value="source-out" />source-out 


添加 用 于 提交 用 户 选择 信息 的 普通 按钮 ， 并 为 该 按钮 添加 单 击 时 的 事件 。 
代码 如 下 : 


<input type="button" value=" 查 看 效果 " onClick="javascript:ChangeChoose()" /> 


创建 ChangeChoose0 函 数 ， 该 函数 根据 用 户 选择 的 组 合 类 型 进行 设置 。 实 
现代 码 如 下 : 


function ChangeChoose (){ 
var canvas = document .getElementBYId ("MyCanvas") 7 
if(canvas .getContext) 1{ 
Var context = canvas.getContext ("2d"); 
Var typelist = document .getElementsByName ("cktype"); 
for (var i=0; i<typelist.length; i++){ 
if(typelist[i].checked){ 


context .fillstyle="#FF7256"; // 填 充 颜色 
context.fillRect (10,10, 60, 60); / /绘制 矩形 
context.globalAlpha = 0.4; // 设 置 透明 度 
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// 设 置 组 合 类 型 

context .globalCompositeOperation=typelist[i] .value; 
context .beginPath (); / /绘制 路 径 
context .fillSstyle="#8FBC8F"; // 填 充 颜 色 
context.arc(60,60,30,0,Math.PI*2, false); / /绘制 圆 形 
context.closePath (); // 关 闭路 径 
context .fill(); // 将 圆 形 绘制 到 画布 


} 
jelsef 

alert ("您 的 浏览 器 不 支持 canvas") ; 
} 


悄 图 团 半 舍 注 SANLH 山 8 由 EA 


} 

上 述 代码 首先 获取 canvas 对 象 和 上 下 文 对 象 ， 接 着 获取 页 面 中 的 所 有 的 单 选项 ， 并 通 
过 for 语句 进行 遍历 。 在 for 语句 中 ， 如 果 某 一 项 被 选中 ， 则 分 别 绘制 矩形 和 圆 形 ， 并 且 指 
定 透 明度 和 组 合 类 型 。 透 明 效果 为 04， 组 合 类 型 则 是 当前 选中 的 类 型 。 

在 浏览 器 中 运行 本 例 的 代码 进行 测试 ，lighter 组 合 效果 如 图 8-12 所 示 。 

| 
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图 8-12 lighter 组 合 效 果 


8.6 ”绘制 颜色 渐变 


浙 变 是 指 在 填充 时 从 一 种 颜色 慢 慢 过 渡 到 另 一 种 颜色 。 一 般 情况 下 ， 可 以 将 渐变 分 为 
两 种 : 线性 渐变 和 径 向 渐变 ， 径 向 渐变 又 可 以 称 为 放射 性 渐变 。 


.6.1 线性 渐变 


线性 渐变 是 沿 着 一 根 轴线 (水 平 或 者 垂直 ) 改 变 颜色 ， 从 起 点 到 终点 颜色 进行 顺序 渐变 
(从 一 边 拉 向 另 一 边 )。 上 下 文 对 象 提 供 createLinearGradient() 方 法 创建 线性 的 渐变 对 象 ， 渐 
变 可 用 于 填充 矩形 、 圆 形 、 线 条 和 文本 等 。createLinearGradient0 的 基本 语法 如 下 : 


Context .createLinearGradient (x0, y0, x1,y1); 


从 上 述 语法 中 可 以 看 出 ，createLinearGradient() 方 法 使 用 时 需要 传 入 4 个 参数 。 其 中 ， 
x0 表示 渐变 开始 点 的 x 坐标 ; y0 表示 渐变 开始 点 的 y 坐标 ; xl 表示 渐变 结束 点 的 x 坐 
标 ; yl 表示 渐变 结束 点 的 y 坐标 。 

通过 createLinearGradient( 方 法 ， 只 是 创建 了 一 个 使 用 两 个 坐标 点 的 LinearGradient 对 
象 。 如 果 要 设置 渐变 的 颜色 ， 则 需要 通过 addColorStop0 方 法 。 该 方法 指定 渐变 对 象 中 的 
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颜色 和 位 置 ， 它 与 createLinearGradient() 方 法 和 createRadialGradient() 方 法 一 起 使 用 。 
addColorStop() 方 法 的 基本 语法 如 下 : 


gradient.addColorStop (stop, color); 


使 用 addColorStop() 方 法 时 ， 需 要 传 入 两 个 参数 : stop 参数 指定 颜色 离开 渐变 起 始点 的 
偏 移 量 ， 它 的 值 位 于 0 和 1 之 间 ; color 参数 指定 结束 位 置 显示 的 CSS 颜色 值 。 
例如 ， 图 8-13 通过 图 形 的 方式 来 描述 偏 移 量 的 含义 ，0 表示 起 始点 ，1 表示 结束 点 。 


起 始点 偏 移 量 为 


图 8-13 addColorStop() 方 法 中 stop 参数 的 含义 


混 技巧 :使 用 者 可 以 多 次 调用 addColorstop0 方 法 来 改变 渐变 。 如 果 不 对 渐变 对 象 
使 用 该 方法 ， 那 么 渐变 将 不 可 见 。 因 此 ， 为 了 获得 可 见 的 渐变 ， 开 发 者 至 少 需要 创建 一 
个 色 标 。 


【 例 8.20】 

本 例 将 createLinearGradient() 方 法 和 addColorStop() 方 法 结合 起 来 ， 实 现 颜 色 依 次 从 
black 到 magenta、blue、green、yellow 的 渐变 。 实 现 步骤 如 下 。 

向 HTML 页 面 中 添加 宽度 为 720、 高 度 为 150 的 canvas 元 素 。 

茹 当 02| 向 画布 中 绘制 颜色 的 线性 渐变 ， 实 现 多 种 颜色 过 渡 。 代 码 如 下 : 


window.onload = function(){ 
var canvas = document .getElementById("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 
// 创 建 LinearGradient 对 象 
var gradient = context.createLinearGradient (0,0,500,0) 
gradient .addColorStop (0, "black"); 
gradient .addColorSstop("0.3", "magenta"); 
gradient.addColorStop("0.5", "blue"); 
gradient .addColorSstop ("0.6", "green"); 
gradient .addColorStop ("0.8", "yellow"); 
gradient .addColorStop(1,"red"); 
context.fillSstyle = gradient; // 将 填充 颜色 设置 为 渐变 
context .fillRect (100, 20, 500,150); // 绘 制 矩形 


葬 澡 03| 在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 8-14 为 渐变 效果 。 
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图 8-14 ”线性 渐变 的 效果 


G62 径 向 渐变 


径 向 渐变 是 指 从 起 点 到 终点 颜色 从 内 到 外 进行 的 圆 形 渐变 (从 中 间 向 外 拉 )。 例 如 ， 绘 
制 太阳 时 ， 沿 着 太阳 的 半径 方向 向 外 扩散 出 去 的 光 晕 就 是 一 种 径 向 渐变 。 绘 制 径 向 渐变 时 
需要 使 用 createRadialGradient() 方 法 ， 基 本 语法 如 下 : 


context .createRadialGradient (x0, y0, r0,x1,y1,r1); 


使 用 createRadialGradient() 方 法 绘制 径 向 渐变 时 ， 涉 及 到 6 个 参数 : x0 和 y0 分 别 表示 
渐变 开始 圆 的 圆心 x 坐标 和 y 坐标 ; r0 表示 渐变 开始 圆 的 半径 ; xl 和 yl 分 别 表示 渐变 结 
束 圆 的 圆心 的 x 坐标 和 y 坐标 ;rl 表示 结束 圆 的 半径 。 

径 向 渐变 分 别 指定 了 两 个 圆 的 大 小 与 位 置 ， 从 第 一 个 圆 的 圆心 外 向 外 进行 扩散 渐变 ， 
一 直 扩散 到 第 二 个 圆 的 外 轮廓 处 。 与 线性 渐变 相同 ， 径 向 渐变 设置 颜色 时 需要 使 用 
addColorStop() 方 法 ， 同 样 也 需要 设置 0~1 之 间 的 浮 点 数 作为 渐变 转折 点 的 偏 移 量 。 

【 例 8.21】 

在 绘制 径 向 渐变 时 ， 两 个 圆 的 位 置 可 能 是 同心 圆 ， 也 可 以 是 不 同心 的 圆 。 本 例 绘制 两 

个 径 向 渐变 ， 第 一 个 渐变 是 同心 圆 ， 第 二 个 渐变 圆心 不 同 。 相 关 的 JavaScript 代码 如 下 : 


window.onload = function(){ 
Var canvas = document .getElementById("MyCanvas"); 
if (canvas.getContext){ 
var context = canvas.getContext ("2d"); 
Var gl = context.createRadialGradient( 
200, 150, 0, 200, 150, 100); // 圆 心 相同 
gl.addColorSstop(0.1; "rgb(25570.0)°")? 
gl.addColorSstop(1, ‘rgb(50,0,0)"'); 
context .fillstyle = gl; 
context .beginPath(); 
context.arc(200, 150,; 100, 0; Math.PI*2, true}s / /绘制 圆 形 
context.closePath(); 
contewt. FELL 
Var g2 = context.createRadialGradient( 
350, 150, 10, 500, 150, 50); // 圆 心 不 同 
g2.addColorStop(0.1, ‘'rgb(255,0,0)"'); 
g2-addColorstop(0.5, "rgb(0,255,.0})")s 
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片 ， 


gq2-addColorSstop(l: "rgb(0.0.255) "Ys 
context.fillStyle = g2; 
context.fillRect (0, 0, 580, 300); // 绘 制 矩形 
} 
} 


在 浏览 器 中 运行 上 述 代码 查看 效果 ， 如 图 8-15 所 示 。 


EP 


所 3 GD fle//D/htmiS/canvastest/twentyOne html 


©-< 


8-15 ” 径 向 渐变 的 效果 


8.7 ”图 片 的 常用 操作 


使 用 上 下 文 对 象 的 方法 ， 不 仅 可 以 绘制 文本 和 图 形 ， 还 可 以 读 取 磁盘 或 者 网 络 中 的 图 


本 节 简单 了 解 如 何 使 用 上 下 文 对 象 的 方法 操作 图 片 。 


全 |; drawlmage() 绘 制 


drawImage( 方 法 表示 对 图 片 的 绘制 ， 使 用 该 方法 可 以 绘制 图 片 的 某 一 部 分 ， 也 可 以 添 


加 或 者 减少 图 片 的 尺寸 。 通 常情 况 下 ，drawImage0 方 法 包含 3 种 使 用 语法 。 


象 ， 


1 . drawImage(image,dx,dy) 


这 是 一 种 最 常用 的 绘制 方法 ， 使 用 时 需要 传 入 3 个 参数 : 第 一 个 参数 是 指 image 对 
它 不 仅 指向 一 个 img 元 素 ， 还 可 以 是 video 元 素 或 者 JavaScript 中 的 image 对 象 ， 第 二 
个 参数 是 指 目标 x 坐标 ， 即 在 画布 绘制 时 的 横 坐标 ， 最 后 一 个 参数 是 指 目标 y 坐标 ， 即 在 


画布 绘制 时 的 纵 坐 标 。 
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【 例 8.22】 
下 面 通过 一 个 具体 的 步骤 演示 drawImage(image,dx,dy) 的 使 用 。 步 又 如 下 。 
向 页 面 中 添加 一 张 图 片 和 一 个 canvas 元 素 。 代 码 如 下 : 


<img src="images/ta.jpg" id="img"> 


<canvas id="MyCanvas" width="500" height="250"> 当 前 浏览 器 不 支持 canvas 元 素 


</canvas> 


添加 JavaScript 脚本 代码 ， 直 接 调用 drawImage(image,dx,dy) 方 法 绘制 图 


片 ， 指 定 绘制 图 片 时 的 起 始点 的 坐标 (150,0)。 代 码 如 下 : 


window.onload = function(){ 
Var canvas = document .getElementById("MyCanvas"); 


if(canvas.getContext){ 
Var context = canvas.getContext ("2d"); 
Var image = document .getElementById ("img"); 
context .drawImage (image, 150,0); 
} 
} 


在 浏览 器 中 运行 上 述 代码 查看 绘图 效果 ， 如 图 8-16 所 示 。 
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8-16 用 drawlmage(image,dx,dy) 绘 制图 片 


2 提示 : 通过 drawImage(image,dx,dy) 方 法 绘制 图 片 时 ， 如 果 图 片 的 高 度 小 于 或 等 
于 画布 的 高 度 ， 那 么 绘制 时 图 片 正常 显示 。 如 果 图 片 的 高 度 大 于 画布 的 高 度 ， 即 画布 高 
度 不 够 ， 那 么 将 会 绘制 图 片 的 一 部 分 。 读 者 可 以 更 改 上 述 示例 中 的 画布 高 度 ， 更 改 完毕 
后 再 次 查看 绘制 效果 。 


2 . context.drawImage(img,dx,dy,width,height) 

与 上 一 种 方式 相 比 ， 这 种 方式 多 出 了 两 个 参数 ，width 和 height 分 别 表示 绘制 时 图 像 
的 宽度 和 高 度 。 例 如 ， 更 改 例 8.22 中 的 代码 ， 指 定 绘 制图 片 时 的 宽度 和 高 度 都 为 150 像 
素 。 代 码 如 下 : 


context .drawImage (image, 150,0,150,150); 


重新 刷新 浏览 器 查看 绘制 效果 ， 如 图 8-17 所 示 。 
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图 8-17 指定 图 片 的 宽度 和 高 度 


3 . context.drawImage(img,sx,sy,swidth,sheight,dx,dy,width,height); 


这 种 语法 方式 表示 剪 切 图 像 ， 并 在 画布 上 定位 被 剪 切 的 部 分 。 在 上 述 方法 中 指定 了 9 
个 参数 。 其 中 ，imsg 指定 要 使 用 的 图 像 、 画 布 或 者 视频 ，sx 和 sy 是 可 选 参数 ， 指 定 开始 剪 
切 时 x 坐标 和 y 坐标 的 位 置 ，swidth 和 sheight 是 可 选 参数 ， 指 定 被 剪 切 图 片 的 宽度 和 高 
度 ; dx 和 dy 分 别 表示 在 画布 上 放置 图 片 的 x 坐标 和 y 坐标 的 位 置 ，width 和 height 是 可 选 
参数 ， 要 使 用 的 图 片 的 宽度 和 高 度 (伸展 或 者 缩小 图 片 )。 

例如 ， 继 续 在 前 面 示例 的 基础 上 更 改 内容 。 代 码 如 下 : 


context .drawImage (image, 20, 20,150,100,150,0,150,250); 


重新 刷新 浏览 器 查看 效果 ， 如 图 8-18 所 示 。 
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图 8-18 剪 切 图 片 的 效果 


72 createPattern() 方 法 


createPattern() 方 法 表示 在 指定 的 方向 上 重复 指定 的 元 素 ， 该 方法 通常 用 于 对 图 片 的 操 
作 。 基 本 语法 如 下 : 


context .createPattern (image, "repeat |repeat-x|repeat-y|lno-repeat"); 


使 用 createPattemn() 方 法 时 需要 传 入 两 个 参数 : 第 一 个 参数 指定 使 用 的 图 片 是 视频 等 元 
素 ， 第 二 个 参数 指定 平 铺 方式 ， 它 的 取 值 说 明 如 下 。 

@ “repeat: 默认 方式 ， 该 方式 在 水 平和 垂直 方向 重复 。 

® repeat-x: 只 在 水 平方 向 重复 。 

® repeat-y: 只 在 垂直 方向 重复 

@ no-repeat: 不 重复 ， 该 方式 只 显示 一 次 。 

【 例 8.23】 

根据 用 户 选择 的 平 铺 方式 查看 createPatterm() 方 法 的 作用 效果 。 有 具体 的 实现 步骤 如 下 。 

E 轴 01| 首先 添加 4 个 单 选 按钮 和 一 个 操作 按钮 ， 并 为 操作 按钮 添加 Click 事件 。 

相关 代码 如 下 : 


<input type="radio" name="picrepeat" checked value="repeat" />repeat 
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&nbsp; <input type="radio" name="picrepeat" value="repeat-x" />repeat-x 
&nbsp; <input type="radio" name="picrepeat" value="repeat-y" />repeat-y 
&nbsp;<input type="radio" name="picrepeat" value="no-repeat" />no-repeat 
&nbsp;<input type="button" value=" 设 置 效果 " onClick = "SetRepeat()"/> 


加 绞 02| 创建 一 个 隐藏 的 图 片 元 素 和 一 个 canvas 元 素 ， 并 指定 canvas 元 素 的 宽度 和 
高 度 。 代 码 如 下 : 
<img src="images/ta.jpg" id="img" height="100" width="100" hidden> 


<canvas id="MyCanvas" width="720"” height="500"> 当 前 浏览 器 不 支持 canvas 元 素 
</canvas> 


创建 SetRepeat0 函数 ， 该 函数 获取 用 户 选择 的 平 铺 样式 ， 并 且 通 过 
createPattern() 方 法 指定 平 铺 。 代 码 如 下 : 


function SetRepeat(){ 
Var canvas = document .getElementById ("MyCanvas"); 
if (canvas.getContext){ 
var context = canvas.getContext ("2d"); 


var image = document .getElementById("img"); // 获 取 页 面 中 的 图 片 
var checks = document .getElementsByName ("picrepeat"); // 获 取 选 择 项 
for (var i=0; i<checks.length; i++)1{ // 遍 历 选 择 项 
if(checks [i] .checked) { // 如 果 当 前 项 被 选中 
context .clearRect (0,0,720,400) // 清 空 矩形 
// 设 置 平 铺 效果 
var cx = context.createPattern (image, checks[i] .value); 
context.fil1Style = cx; // 填 充 样 式 
context.fillRect (0,0,720, 400); // 绘 制 矩 形 


} 
} 


} 
在 浏览 器 中 运行 上 述 代码 ， 选 择 不 同 的 平 铺 样式 查看 效果 ， 如 图 8-19 所 示 
为 默认 的 平 铺 效果 。 
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图 8-19 ”repeat 平 铺 方式 的 效果 


73 clip( 访 法 


clip() 方 法 表示 从 原始 画布 中 剪 切 任意 形状 和 尺寸 。 一 旦 剪 切 了 某 个 区 域 ， 则 所 有 之 后 
的 绘图 都 会 被 限制 在 被 剪 切 的 区 域内 (不 能 访问 画布 上 的 其 他 区 域 )。 当 然 ，Web 开发 者 可 
以 在 使 用 clip0 方 法 前 通过 save( 方 法 对 当前 画布 区 域 进行 保存 ， 并 在 以 后 的 任意 时 间 对 其 
进行 恢复 (通过 restore0 方 法 )。 

clip0 方 法 的 使 用 非常 简单 ， 直 接 调 用 即 可 。 基 本 语法 如 下 : 


context.clip(); 


【 例 8.24】 

本 例 通过 clip() 方 法 裁剪 一 张 图 片 ， 裁 前后 的 图 片 是 一 个 星 形 。 实 现 步骤 如 下 。 

向 页 面 中 分 别 添加 img 元 素 和 canvas 元 素 ， 页 面 代 码 不 再 给 出 。 

罗江 02| 添加 JavaScript 代码 ， 在 这 段 代 码 中 首先 绘制 宽度 为 350 像素 、 高 度 为 300 
像素 的 矩形 ， 接 着 创建 图 片 元 素 ， 并 且 在 图 片 的 load 事件 中 调用 自 定义 的 
drawImage0 函 数 。 代 码 如 下 : 


window.onload = function(){ 
Var canvas = document .getElementById ("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext ("2d"); 
context.fillstyle = "white"; 
context .fillRect (0, 0, 350, 300); // 和 矩形 
image = new Image(); 
image.onload = function () { 
drawImg (context, image); 
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} 
image.src = "images/flower.jpg"; / /图片 路 径 
} 
} 


drawImg0 函 数 需要 传 入 两 个 参数 ， 第 一 个 参数 是 上 下 文 对 象 ， 第 二 个 参数 
是 图 片 对 象 。 在 该 方法 中 调用 create5StarClip0 裁 前 星 形 图 片 ， 并 且 调 用 
drawImage() 方 法 绘图 。 代 码 如 下 : 


function drawImg (context, image) { 

create5StarClip (context); 

context .drawImage (image, 0,0); // 绘 制图 片 
} 


create5StarClip0 函 数 将 图 片 裁剪 为 星 形 ， 这 里 用 到 数学 知识 。 代 码 如 下 : 


function create5StarClip (Context) { 
var n = 0,dx = 180,dy = 135,s = 150; 
context .beginPath(); // 开 始 绘制 路 径 
var x = Math.sin(0); 
var y = Math.cos (0); 
var dig = Math.PI / 5 * 4; 
for (var i=0; i<5; i++) { // 遍 历 绘制 五 星 的 5 个 点 


var x = Math.sin(i * dig); 
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var y = Math.cos(i * dig); 
context.lineTo(dx + x* 5s, dy + y * s); // 绘 制 线条 
1 


context.closePath(); // 关 闭路 径 
context.clip(); // 裁 前 


} 
在 浏览 器 中 运行 示例 代码 ， 查 看 裁 前 效果， 如 图 8-20 所 示 。 
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图 8-20 图片 裁剪 效果 


8.8 ”实现 动画 特效 


前 面 介绍 的 内 容 都 是 静态 的 ， 即 没有 实现 任何 特效 。 例 如 ，Web 开发 者 可 以 通过 调用 
上 下 文 对 象 的 方法 绘制 一 个 静态 钟表 ， 当 然 ， 也 可 以 借助 于 有 关 的 JavaScript 知识 实现 动 
画 特效 ， 让 钟表 “ 动 ” 起 来 。 


a1 了 解 动画 


由 于 是 用 JavaScript 脚本 操作 canvas 的 ， 因 此 ， 要 实现 一 些 交 互动 画 是 很 容易 的 。 只 
不 过 canvas 并 非 是 为 了 制作 动画 而 出 现 的 ， 因 此 没有 动画 制作 中 帧 的 概念 。 使 用 定时 器 不 
断 地 绘制 canvas 画面 成 为 实现 动画 效果 的 通用 解决 方式 。 

JavaScript 中 的 setInterval(code，millisec) 方 法 可 以 按照 指定 的 时 间 间 隔 millisec 来 反复 
调用 code 所 指向 的 函数 或 者 代码 串 。 

基本 语法 如 下 : 


setInterval (code, millisec); 


上 述 语法 中 code 参数 表示 执行 动画 的 函数 ，millisec 参数 为 时 间 间 隔 ， 单 位 是 毫秒 。 
这 样 ， 通 过 将 绘图 函数 作为 第 一 个 参数 传 给 setInterval0 方 法 ， 在 每 次 被 调用 的 过 程 中 移动 
画面 中 图 形 的 位 置 ， 来 最 终 实现 一 种 动画 的 体验 。 
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次 注意 : 虽然 setInterval0 方 法 的 第 二 个 参数 允许 开发 者 对 绘图 画 数 的 调用 频率 进行 
设 定 ， 但 这 始终 都 是 一 种 最 为 理想 的 情况 。 由 于 这 种 绘图 频率 很 大 程度 上 取决 于 支持 
canvas 的 底层 JavaScript 引擎 的 泻 染 速 度 以 及 相应 绘图 画 数 的 复杂 性 , 因而 实际 运行 的 
结果 往往 都 是 要 慢 于 指定 绘图 频率 的 。 
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Ga? 实战 一 一 绘制 动态 闪 动 线条 


JavaScript 的 功能 非常 强大 ， 本 节 实 战 利 用 canvas 元 素 、 上 下 文 对 象 以 及 setInterval() 
方法 绘制 动态 线条 ， 线 条 的 颜色 随机 设置 。 实 现 步骤 如 下 。 
向 页 面 中 添加 canvas 元 素 ， 并 且 指 定 其 宽度 、 高 度 和 样式 。 代 码 如 下 ; 


<canvas id="MyCanvas" width="400" height="400" style="border: 10px 
#FFDAB9 solid"> 当 前 浏览 器 不 支持 canvas 元 素 </canvas> 


创建 JavaScript 脚本 ， 首 先 判断 当前 浏览 器 是 否 支持 canvas 元 素 ， 如 果 支 
持 则 绘制 彩色 线条 。 代 码 如 下 : 


Var mycanvas = document.getElementById("MyCanvas"); 
if (mycanvas .getContext) { 
var mycontext = mycanvas.getContext ("2d"); 
lh a AD7 // 定 义 变量 
function line() { 
X=Math .floor (Math.random()*190) + Math.floor (Math.random()*190) 7 
Y=Math .floor (Math.random()*190) + Math.floor (Math.random()*190) 
X2=Math .floor (Math.random()*190)+ Math.floor (Math.random()*190) 7 
Y2=Math.floor (Math.random()*190)+ Math.floor (Math.random()*190) 
r=Math.floor (Math.random()*255) 
g=Math .floor (Math.random()*255) 7 
b=Math .floor (Math.random()*255) 


mycontext .moveTo (x, y); // 原 点 
mycontext .lineTo (x2, y2); // 目 标点 
mreoontext strokeStyle = ED 人 Trt "p40 sn 4D 


mycontext.lineWidth = Math.floor (Math.random()*6); 
mycontext .stroke(); 
mycontext .restore(); 
} 
上 述 代码 定义 7 个 变量 ， 这 些 变量 在 line() 函 数 中 进行 调用 。x 和 y 表示 开始 绘制 线条 
时 起 始 位 置 的 横 坐 标 和 纵 坐 标 ，x2 和 y2 表示 线条 结束 点 的 横 坐 标 和 纵 坐标 ; r、g、b 则 定 
义 R(Red)、G(Green)、B(Blue) 颜 色 。 在 line0 函 数 中 首先 设置 x、y 以 及 x2、y2 等 变量 的 
值 ， 然 后 再 调用 moveTo0 和 lineTo0 方 法 来 绘制 线条 。 
通过 setInterval0 函 数 设置 计时 特效 ， 每 100 毫秒 调用 一 次 line0 函 数 。 代 码 
如 下 : 


setInterval (line, 100); 


04] 在 浏览 器 中 运行 代码 ， 查 看 效果 ， 如 图 8-21 所 示 为 动态 内 动 线条 的 一 个 瞬 
步 台 3 
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时 特效 。 
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图 8-21 动态 闪 动 线条 的 瞬时 特效 


8.9 本 章 习 题 


1. 填空 题 


(1) 获取 上 下 文 对 象 时 需要 通过 canvas 对 象 的 方法 。 
(2) 绘制 文本 时 ， 方法 表示 在 画布 上 绘制 "被 填充 "的 文本 。 
(3) 调用 上 下 文 对 象 的 方法 用 于 清空 指定 的 矩形 区 域 。 
(4) 方法 表示 起 始 一 条 路 径 ， 或 者 重 置 当 前 路 径 。 
(5) 绘制 贝 塞 尔 曲线 涉及 到 的 两 个 方法 是 和 bezierCurveTo()。 
2. 选择 题 
(1) 上 下 文 对 象 可 以 调用 属性 设置 阴影 的 模糊 程度 。 
A . shadowColor 
B . shadowBlur 
C . shadowOffsetX 
D . shadowOffsetY 
(2) 绘制 图 形 完毕 后 ， 可 以 调用 方法 关闭 路 径 。 
A . startPath() 


B . chipO 
C . beginPath() 


ba 
第 
D . closePath() 到 
(3) 绘制 线性 渐变 和 径 向 渐变 时 都 需要 调用 方法 追加 颜色 渐变 效果 。 2 
A . createColorStopO EE 
B . createLinearGradient() 操 
C . addColorStop() 
D . createRadialGradient() 
(4) createPattern0 方 法 实现 图 片 平 铺 时 ， 默 认 的 平 铺 方式 是 8 下 
A . repeat 
B . repeat-x 
C .repeat-y 
D . no-repeat 
3. 上 机 练习 
(1) 绘制 指定 的 图 形 
根据 本 章 介绍 的 上 下 文 对 象 的 方法 创建 不 同 的 图 形 ， 包 括 线条 、 三 角形 、 和 矩形 、 圆 形 
和 局 形 。 除 此 之 外 ， 还 需要 使 用 任意 一 种 绘制 文本 的 方法 绘制 出 文本 字符 串 ， 该 字符 串 是 


“我 在 练习 使 用 绘制 文本 ”。 
(2) 绘制 指定 的 图 形 
利用 本 章 介绍 的 知识 绘制 出 一 个 比较 复杂 的 图 形 ， 该 图 形 的 最 终 效果 如 图 8-22 所 示 。 

注意 : 在 绘制 图 形 时 可 能 会 使 用 到 数学 知识 。 
部 分 代码 如 下 : 


Var x = Math.sin(0); 

var y = Math.cos(0); 

var dig = Math.PI / 15 * 11; 

for (var i=0; i<30; i++) { 
var x = Math.sin(i * dig); 
var y = Math.cos(i * dig); 
context.lineTo(dx + x * s, dy +y* s); 


| 
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图 8-22 上 机 练习 (2) 的 效果 
(3) 对 图 像 进行 操作 


利用 drawImage() 方 法 的 不 同形 式 绘制 图 像 ， 并 且 实 现 图 像 的 平 铺 和 裁剪 功能 ， 裁剪 时 
的 效果 如 图 8-23 所 示 。 在 该 图 中 ， 左边 是 图 片 的 原始 效果 ， 右 侧 是 裁剪 后 的 效果 。 
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8-23 ”和 栽 剪 及 其 裁剪 后 的 效果 


HTML 5 的 其 他 新 特性 


HTML 5 的 出 现 越 来 越 受到 人 们 的 重视 与 青睐 ， 其 中 最 大 的 原因 就 是 解决 了 
HTML 4 的 诸多 局 限 性 。 在 HTML 5 中 ， 这 些 局 限 性 得 到 了 很 大 程度 的 改善 ， 像 
允许 用 户 选 择 多 个 文件 并 读 取 其 内 容 ， 能 够 在 客户 端 存 储 大 数据 和 使 用 数据 库 ， 
甚至 可 以 像 窗 体 应 用 程序 一 样 跨 文 档 传递 数据 和 实现 多 线程 等 。 

本 章 将 从 7 个 方面 介绍 HIML 5 的 这 些 新 增 特性 。 通 过 本 章 的 学 习 ， 读 者 
可 JI 外 ETIML 5 中 提供 的 高 级 技术 ， 也 可 以 熟练 使 用 这 些 技术 实现 某 些 常用 
的 功能 。 

本 章 学 习 目标 : 
掌握 FileList 对 象 获取 多 个 文件 信息 的 方法 
掌握 FileReader 接口 的 方法 和 事件 
了 解 FileError 接口 的 错误 编码 
熟悉 DataTransfer 对 象 的 常用 方法 和 属性 
了 解 localStorage 对 象 和 sessionStorage 对 象 的 区 别 
掌握 JSON 的 parse() 方 法 和 stringify0 方 法 
熟悉 HIML 5 中 多 线程 的 实现 过 程 
了 解 HTML 5 的 地 图 API 
了 解 HTML 5 的 离线 缓存 
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9.1 文件 新 增 特 性 


文件 在 HTML 5 中 占有 非常 重要 的 作用 。HTML 5 为 文件 操作 提供 了 一 个 全 新 的 文件 
API， 通 过 这 个 API， 使 得 访问 本 地 文件 和 处 理 文件 信息 变 得 十 分 简单 。 例 如 ， 可 以 同时 
选择 多 个 文件 ， 对 文件 扩展 名 进行 过 滤 以 及 查看 文件 内 容 等 。 下 面 详细 介绍 HTML 5 中 文 
件 API 的 具体 操作 。 


.11 获取 多 个 文件 的 信息 


HTML 5 同样 可 以 使 用 file 类 型 来 创建 一 个 文件 域 。 具 体 方法 是 在 form 内 创建 一 个 
input 类 型 为 file 的 元 素 ， 然 后 运行 即 可 。 浏 览 器 会 自动 识别 并 创建 相应 的 浏览 按钮 和 选择 
文件 对 话 框 。 

在 file 类 型 中 选择 的 文件 其 实 是 一 个 file 对象 。file 对 象 有 4 个 属性 ， 如 下 所 示 。 

@ name: 表示 选中 文件 不 带路 径 的 名 称 。 


@ size: 使 用 字 节 表示 的 文件 大 小 。 

@ type: 使 用 MIME 类 型 表示 的 文件 类 型 。 

@ lastModifiedDate: 表示 文件 的 最 后 修改 日 期 。 

e@ ”multiple: 表示 是 否 允 许 同时 选择 多 个 文件 ， 默 认 值 为 false。 

【 例 9.1】 

创建 一 个 示例 ， 使 用 HTML 5 的 file 对 象 获取 用 户 选择 文件 的 名 称 、 大 小 、 类 型 和 修 
改 日 期 。 


葬 洲 01| 首先 需要 创建 一 个 表单 ， 并 将 file 对 象 的 multiple 属性 设置 为 tue， 使 用 户 
可 以 选择 多 个 文件 。 代 码 如 下 : 
<h2> 上 传 照 片 </h2> 


<form id="forml"> 

选择 文件 

<input type="file" id="bookfile" multiple="true" /> 

<input type="button" value=" 提 交 " onclick="selectedFiles()" /> 
</form> 


葬 凡 02| 在 上 传 表单 的 下 方 添加 一 个 表格 ， 显 示 最 终结 果 。 代 码 如 下 : 


<table width="100%" cel1spacing="1"” cellpadding="1" border="0" 
class="mytable"> 
中 
<th> 文 件 名 称 </th> 
<th> 文 件 大 小 </th> 
<th> 文 件 类 型 </th> 
<th> 上 次 修改 日 期 </th> 
</tr> 
<tbody id="tFiles"> 
</tbody> 
</table> 


现在 运行 示例 ， 即 可 在 弹出 的 对 话 框 中 选择 多 个 文件 。 如 图 9-1 所 示 为 选 
中 多 个 文件 时 的 预览 效果 。 

为 了 实现 在 单 击 “ 提 交 ” 按 钮 后 显示 这 些 文件 的 信息 ， 还 需要 编写 
selectedFiles() 函 数 ， 具 体 实现 代码 如 下 : 


function selectedFiles() 
{ 
var result = $("tFiles"); 
for (var i=0; i<$ ("bookfile") .files.length; i++) // 遍 历 选 中 的 多 个 文件 
{ 
var aFile = $("bookfile") .files[i]; 
Var str = "<tr><td><img src=\"images/manico.gif\" />" 
+ aFile.name + "</td><td>" 
+ aFile.size + " 字 节 </td><td>" + aFile.type + "</td><td>" 
+ aFile.lastModifiedDate + "</td></tr>"; 
result.innerHTML += str; 


} 

当 使 用 multiple 属性 后 ， 用 户 选择 的 多 个 文件 实际 上 保存 在 一 个 files 数组 中 ， 其 中 的 
每 个 元 素 都 是 一 个 file 对 象 。 因 此 ， 为 了 获取 每 个 文件 的 信息 ， 需 要 对 files 数组 进行 志 
历 ， 再 逐个 获取 文件 名 称 、 大 小 、 类 型 和 修改 日 期 。 代 码 运行 效果 如 图 9-2 所 示 。 
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上 传 照片 


选择 文件 | 选拔 文件 |3 个 文件 [EE 
文件 名 称 文件 大 小 文件 类 型 上 次 修改 日 期 


pe 二 216 字 节 。 image/ JJeg Toe Jal 14 z009 12:s2;z5 N0500 (中 国标 准时 间 ) 


9-1 选中 多 个 文件 的 效果 9-2 ”显示 多 个 文件 信息 的 效果 
【 例 9.2】 


使 用 file 对 象 的 type 属性 可 以 获取 文件 类 型 ， 可 以 利用 此 属性 来 限制 用 户 允 许 上 传 的 
文件 类 型 。 例 如 ， 和 希望 只 允许 上 传 PG 图 片 ， 如 果 不 是 ， 则 给 出 错误 提示 或 跳 过 该 文件 。 

实现 方法 是 对 示例 中 的 selectedFiles0 函 数 进行 修改 ， 增 加 文件 类 型 判断 的 功能 ， 使 用 
户 只 能 上 传 图 像 类 型 的 文件 。 如 下 所 示 是 修改 后 的 函数 代码 : 


function selectedFiles() 
Var result = $("tFiles"); 
for (var i=0; i<$ ("bookfile").files.length; i++) 
{ 
var aFile = $("bookfile") .files[i]; 
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if(!/image\/\w+/.test (aFile.type)) // 判 断 类 型 是 否 匹 配 
{ 
alert (aFile.name + "不 是 图 像 文件 不 能 上 传 .") ; 
continue; 
var str = "<tr><td><img src=\"images/manico.gif\" />" 
+ aFile.name + "</td><td>" 
+ aFile.size+" 字 节 </td><td>" + aFile.type + "</td><td>" 
+ aFile.lastModifiedDate + "</td></tr>"; 
result.innerHTML += str; 


上 
} 


在 这 里 ， 主 要 是 通过 判断 type 属性 的 值 是 否 以 “image/” 开 头 来 区 分 图 像 类 型 。 现 在 
运行 程序 ， 仍 然 可 以 在 对 话 框 中 选择 任何 类 型 的 文件 ， 如 图 9-3 所 示 为 选择 5 个 文件 后 的 
效果 。 

然后 单 击 “提交 ”按钮 ， 将 会 对 文件 类 型 进行 判断 ， 不 匹配 时 将 弹出 对 话 框 进 行 提 
示 。 最 终 仅 在 列表 中 显示 符合 条 件 的 文件 ， 如 图 9-4 所 示 。 
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图 9-3 选择 多 个 文件 后 的 效果 图 9-4 提交 后 的 运行 效果 


则 技巧 ， 如 果 为 input 元 素 添加 accept 属性 ， 也 可 指定 要 过 滤 的 文件 类 型 。 例 如 ， 
用 accept= ”image/jpeg "同样 可 以 实现 例 9.2 的 效果 。 


6 新 增 的 FileReader 接 口 简 介 


HTML 5 的 file 对 象 主要 用 于 获取 文件 属性 信息 ， 如 果 要 读 取 文 件 的 内 容 ， 则 需要 调 
用 HTML 5 中 新 增 的 FileReader 接口 。FileReader 接口 提供 了 一 组 异步 API， 通 过 这 些 
API， 可 以 从 浏览 器 的 主线 程 中 异步 访问 文件 系统 。 

表 9-1 中 列 出 了 FileReader 接口 中 用 于 读 取 文 件 的 方法 及 其 说 明 。 需 要 注意 ， 无 论 读 
取 成 功 或 者 失败 ， 读 取 方 法 都 不 会 返回 读 取 结果 ， 而 是 将 结果 保存 在 result 属性 中 。 

除了 上 述 的 方法 之 外 ，FileReader 接口 还 包含 了 一 套 完整 的 事件 模型 来 监视 读 取 文 件 
时 的 各 个 状态 。 这 些 事件 主要 如 表 9-2 所 示 。 
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表 9-1 FileReader 接口 的 方法 


方法 名 称 说 明 
TeadAsArrayBuffe 使 用 字 节 数组 格式 读 取 文 件 内 容 
TeadASText 使 用 文本 格式 读 取 文 件 内 容 
readAsDataURLO 使 用 URL 格式 读 取 文 件 内 容 
abort 中 断 当 前 读 取 操作 

表 9-2 FileReader 接口 的 事件 
事件 名 称 说 明 
onabort 当 读 取 数 据 中 断 时 触发 
onerror 当 读 取 数 据 出 错时 触发 
onloadstart 当 读 取 数 据 开 始 时 触发 
onprogress 当 正 在 读 取 数 据 时 触发 
onload 当 读 取 数 据 成 功 时 触发 
onloadend 当 读 取 操 作 完成 时 触发 ， 无 论 成 功 或 者 失败 都 触发 
【 例 9.3】 


由 于 并 非 所 有 浏览 器 都 支持 HIML 5 的 FileReader 接口 。 因 此 ， 在 使 用 之 前 必须 先 判 
断 浏览 器 是 否 支 持 FileReader 接口 ， 代 码 如 下 所 示 : 
if(typeof FileReader=="undefined"){ 


alert ("对 不 起 ， 


}elsef{ 


您 的 浏览 器 不 支持 FileReader 接口 ， 将 无 法 正常 使 用 本 程序 。") ; 


alert ("您 的 浏览 器 环境 正常 。"); 


var fd = new FileReader(); 


} 


迪 注意 : 当 访 问 不 同 的 文件 时 ， 必 须 创 建 不 同 的 FileReader 接口 实例 。 因 为 每 调用 
一 次 FileReader 接口 ， 都 将 返回 一 个 新 的 FileReader 对 象 ， 这 样 才能 访问 不 同文 件 中 


的 数据 。 


CE 使 用 FileReader 接 口 读 取 文 件 


FileReader 接口 是 W3C 为 读 取 文件 内 容 在 HTML 5 中 新 增 的 ， 上 节 介 绍 了 该 接口 的 方 


法 ， 下 面 详细 介绍 这 些 方法 的 具体 应 用 。 


1. 使 用 readAsText() 方 法 
readAsText() 方 法 可 以 以 文本 格式 读 取 文件 的 内 容 。 语 法 格式 如 下 : 


var result = FileReader.readAsText (blob, encoding); 
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第 一 个 参数 是 file 类 型 ， 表 示 要 读 取 的 文件 ， 第 二 个 参数 是 字符 串 类 型 ， 用 于 指定 读 


取 时 使 用 的 编码 ， 默 认 值 为 UTF-8。 返 回 值 为 字符 串 形 式 的 文件 内 容 。 
【 例 9.4】 
使 用 readAsText( 方 法 制作 一 个 实现 读 取 用 户 选择 文本 文件 内 容 的 案例 ， 并 最 终 将 内 
容 显示 到 页 面 上 。 
首先 创建 一 个 表单 ， 添 加 文件 上 传 域 和 结果 显示 布局 。 代 码 如 下 所 示 : 
<h2> 上 传 内 容 </h2> 
<form id="forml"> 
选择 本 地 的 文本 文件 
<input type="file" id="bookfile" multiple="true" /> 
<input type="button" value=" 读 取 " onclick="readFileContent()" /> 
</form> 


<div class="text" id="result"> 


上 述 代码 的 重点 是 file 类 型 和 读 取 按 钮 ，file 类 型 允许 用 户 选 择 一 个 文件 。 单 击 “ 读 
取 ” 按 钮 后 ， 将 执行 readFileContent0 函 数 ， 将 文件 内 容 显 示 到 下 方 的 div 中 。 

readFileContent() 函 数 的 实现 代码 如 下 所 示 : 

function readFileContent () // 读 取 文 本 文件 的 内 容 

{ 


if($ ("bookfile") .files.length) // 判 断 是 否 选择 了 文件 
{ 
Var aFile=$ ("bookfile") .files[0]; 
if(!/text\/\w+/.test(aFile.type))  // 判 断 是 否 为 文本 文件 
alert (aFile.name + "不 是 文本 文件 不 能 上 传 .") 7 
return false; 


} 
if (typeof FileReader 一 "undefined") “ // 判 断 当前 浏览 器 是 否 支持 FileReaqder 接口 


alert ("对 不 起 ， 您 的 浏览 器 不 支持 FileReader 接口 ， 将 无 法 正常 使 用 本 程序 。") ; 
} 


else 
{ 
var fd = new FileReader(); / /创建 FileReader 接口 的 对 象 
fd.onload = function (res){ // 显 示 文 件 内 容 
$ ("result") .innerHTML = this.result; 
| 
fd.readAsText (aFile); // 开 始 读 取 
} 
} 
else 
{ 
alert ("没有 选择 文件 ， 不 能 继续 。") ; 
return false; 
I 


} 


如 上 述 代码 所 示 ， 在 readFileContent0 函 数 中 针对 没有 选择 文件 、 文 件 类 型 不 对 以 及 浏 
览 器 不 支持 FileReader 接口 的 情况 进行 了 判断 。 真 正 使 用 readAsText0 方 法 读 取 文件 内 容 


je 
J 
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的 代码 非常 简单 ， 不 过 要 注意 结果 属性 result 只 能 在 onload 事件 中 使 用 。 
现在 运行 ， 即 可 查看 读 取 文本 文件 内 容 的 效果 ， 如 图 9-5 所 示 。 
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9-5 读 取 文 本 内 容 的 效果 


2. 使 用 readAsDataURL( 方 法 


readAsDataURIL() 方 法 可 以 将 文件 读 取 为 一 串 URL 字符 串 。 该 字符 串通 常会 使 用 特殊 
格式 的 URL 形式 直接 读 入 页 面 ， 如 图 像 格式 等 。 该 方法 的 语法 格式 如 下 : 
Var result = FileReader.readAsDataURL (blob); 


blob 参数 表示 文件 的 只 读 原始 数据 对 象 。readAsDataURL() 方 法 返回 值 是 一 个 表示 数据 
的 本 地 对 象 。 

【 例 9.5】 

使 用 FileReader 接口 的 readFAsDataURL( 方 法 实现 不 通过 后 台 即 时 实现 图 片 预览 的 功 
能 ， 其 中 允许 用 户 选 择 多 个 图 片 文件 ， 单 击 按钮 提交 后 ， 显 示 这 些 文件 的 缩 略 效果 图 。 

创建 一 个 表单 ， 将 文件 选择 框 的 multiple 属性 设置 为 tue。 然 后 向 名 称 是 

“ 读 取 图 像 文件 ”的 按钮 中 添加 onClick 事件 属性 。 代 码 如 下 : 
选择 文件 ，<input type="file" id="selFile" multiple="true" /><br/><br/> 
<input type="button" id="btnGetPicInfo" value=" 读 取 图 像 文件 " 
onClick="GetPicFile()" />gnbsp; gnbsp; 
向 页 面 中 添加 显示 图 片 列表 的 div 元 素 。 代 码 如 下 : 


<div id="result"></div> 


区 罚 03| GetPicFile0 文 件 用 于 获取 用 户 选择 的 文件 ， 并 且 进 行 判 断 ， 如 果 选 择 的 文 
件 符合 是 图 像 的 要 求 ， 则 将 其 显示 到 页 面 中 ， 否 则 会 弹出 提示 。 代 码 如 下 : 


function GetPicFile() 
var filelist = document .getElementById ("selFile"); // 获 取 选 择 的 文件 
if (filelist.files.length==0) // 如 果 选 择 文件 列表 为 空 
{ 
alert ("请 选择 您 要 查看 的 图 像 ") ; 
}elsef{ 
for (var i=0; i<filelist.files.length; i++) { // 循 环 显示 文件 
var file = filelist.files[i]; // 获 取 单 个 文件 
var imageType = /image.*/; // 声 明文 件 类 型 
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if (!file.type-match (imageType)) { // 如 果 上 传 文件 不 合法 
alert (file.name + "不 是 图 像 文件 ， 因 此 不 能 上 传 。") > 
continue; 

， 

Var reader = new FileReader (); // 实 例 FileReader 接口 对 象 

reader.onload = function(e){ // 显 示 图 像 


$("result") .innerHTML += "<img src=" 
+ e.target.result + " width=100 height=100 " 
+ "style="'padding-right:1px;padding-bottom:1px;' />"; 
Fs 
reader .readAsDataURL (file); 


} 


国 浪 04| 运行 页 面 ， 查 看 效果 ， 所 有 图 像 选 择 完成 后 单 击 “ 读 取 图 像 文件 ”按钮 进 
行 预览 查看 ， 效 果 如 图 9-6 所 示 。 
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9-6 ”显示 预览 图 像 的 效果 


3. 使 用 readAsArrayBuffer() 方 法 

readAsArrayBuffer0 方 法 可 以 将 文件 读 取 为 字 节 数组 ， 通 常 是 将 它 传送 到 后 端 ， 后 端 
可 以 通过 这 段 字 符 串 存储 文件 。 语 法 格式 如 下 : 

var result = FileReader.readAsArrayBuffer (blob); 

blob 参数 表示 文件 的 只 读 原始 数据 对 象 。readAsArrayBuffer() 方 法 返回 值 是 一 个 表示 
数据 的 ArrayBUffer 对 象 。readerAsBinaryString0) 方 法 的 使 用 很 简单 ， 只 要 将 一 个 要 读 取 的 


文件 file 作为 参数 传 入 即 可 ， 这 样 读 取 的 结果 保存 到 result 属性 中 。 具 体 使 用 与 
readAsDataURL0O 方 法 相同 ， 这 里 就 不 再 介绍 了 。 


9.1.4 ”使 用 FileReader 接 口 监听 事件 


在 前 面 介绍 FileReader 接口 中 读 取 方 法 的 使 用 时 ， 仅 对 onload 事件 进行 了 处 理 。 在 读 
取 正 常 的 情况 下 ，FileReader 接口 中 事件 的 触发 顺序 如 下 : 


onloadstart -> onprogress -> onload -> onloadend 


除了 执行 顺序 外 ， 在 实际 使 用 时 还 应 该 注意 如 下 区 别 : 

@ ”大 部 分 的 文件 读 取 过 程 都 集中 在 onprogress 事件 ， 该 事件 耗 时 最 长 。 

@ ”如 果 文 件 在 读 取 过 程 中 出 现 异 常 或 者 中 止 ， 那么 onprogress 事件 将 结束 ， 并 直接 
触发 onerror 或 者 onabort 事件 ， 而 不 触发 onload 事件 。 

@ ”onload 事件 是 文件 读 取 成 功 时 触发 ， 而 onloaded 事件 虽然 也 是 文件 操作 成 功 时 触 
发 。 但 是 onloaded 事件 无 论 读 取 成 功 或 者 失败 ， 都 会 触发 ， 这 一 点 需要 注意 。 
此 ， 如 果 要 正确 获取 文件 数据 ， 必 须 在 onload 事件 中 编写 代码 ， 而 不 是 onloaded 
事件 。 


攻 习 提示 : FileReader 接口 中 的 每 个 事件 都 表示 读 取 文 件 时 的 一 个 状态 。 


【 例 9.6】 
创建 一 个 示例 来 监听 读 取 过 程 中 的 所 有 事件 ， 并 输出 事件 的 执行 先后 顺序 。 布 局 代码 
如 下 所 示 : 


<h2> 上 传 图 片 </h2> 

<form id="forml"> 
选择 文件 : 
<input type="file" id="selFile" multiple="true" accept="image/jpeg" /> 
<br/> <br/> 
<input type="button" id="btnGetPicInfo" value=" 读 取 图 像 文件 " 

onClick="GetPicFile()" /> 

</form> 

<div class="text" id="result"> 
<img class="pic" id="bookpic" width="300px" height="200px"/> 
<ol id="eventList"></ol> 

</div> 


上 述 代 码 中 id 为 bookpic 的 img 元 素 用 于 显示 选中 的 图 片 ，id 为 eventList 的 ol 元 素 
用 于 显示 事件 的 执行 顺序 。 
如 下 所 示 是 单 击 “ 读 取 图 像 文件 ”按钮 调用 GetPicFile0 函 数 的 实现 代码 ; 


function GetPicFile() 
var aFile = $("selFile") .files[0]; 
if(typeof FileReader=="undefined") 
{ 
alert ("对 不 起 ， 您 的 浏览 器 不 支持 FileReader 接口 ， 将 无 法 正常 使 用 本 程序 。") ; 
} 
else 
{ 
var fd = new FileReader (); 
fd.readAsDataURL (aFile); 
// 处 理 onload 事件 
fd.onload=function(e){ 
$ ("bookpic") .src = this.result; 
$ ("eventList") .innerHTML += "<1i> 触 发 了 onload 事件 </1i>"; 


// 处 理 onprogress 事件 


fd.onprogress = function(e){ 
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$ ("eventList") .innerHTML += "<1i> 触 发 了 onprogress 事件 </1i>"; 


} 
// 处 理 onabort 事件 
fd.onabort=function (e){ 
$ ("eventList") .innerHTML += "<1i> 触 发 了 onabort 事件 </1i>"; 


} 
// 处 理 onerror 事件 
fd.onerror=function (e){ 
$ ("eventList") .innerHTML += "<1i> 触 发 了 onerror 事件 </1i>"; 
L 
// 处 理 onloadstart 事件 
fd.onloadstart=function(e){ 
$ ("eventList") .innerHTML += "<1i> 触 发 了 onloadstart 事件 </1i>"; 
// 处 理 onloadend 事件 
fd.onloadend=function(e){ 
$ ("eventList") .innerHTML += "<1i> 触 发 了 onloadend 事件 </1i>"; 
} 
} 
} 


上 述 代码 对 使 用 readAsDataURI() 方 法 读 取 图 像 过 程 中 触发 的 所 有 事件 进行 了 监听 ， 
并 依次 进行 显示 。 最 终 通 过 显示 的 结果 可 以 了 解 事件 执行 顺序 。 如 图 9-7 所 示 为 运行 后 的 


© DO fle///D/WwwwRoot/Blog2.html 
营 上 传阅 片 


二 大 全: 【 通 而 文人 ] LUghehoore jp 
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9-7 ”浏览 器 运行 效果 


61s 文件 读 取 时 的 异常 处 理 


虽然 使 用 FileReader 接口 中 的 方法 可 以 快速 实现 对 文件 的 读 取 。 但 是 ， 在 文件 读 取 的 
过 程 中 ， 不 可 避免 地 会 出 现 各 种 类 型 的 错误 和 异常 。 这 时 便 可 以 通过 FileError 接口 获取 错 
误 与 异常 所 产生 的 错误 代码 ， 再 根据 返回 的 错误 代码 分 析 具 体 发 生 错误 与 异常 的 原因 。 
在 出 现下 列 情况 时 ， 可 能 会 导致 FileReader 接口 出 现 潜在 的 错误 与 异常 : 
@ ”访问 某 个 文件 的 过 程 中 ， 该 文件 被 移动 或 者 删除 及 被 其 他 应 用 程序 修改 。 
@ ”由 于 权限 原因 ， 无 法 读 取 文 件 的 数据 信息 。 


@ ”文件 出 于 案例 因素 的 考虑 ， 在 读 取 文件 时 返回 一 个 无 效 的 数据 信息 。 

e@ 读 取 的 文件 太 大 ， 超 出 URL 网 址 的 限制 ， 将 无 法 返回 一 个 有 效 的 数据 信息 。 

e@ ”在 读 取 文件 的 过 程 中 ， 应 用 程序 本 身 触发 了 中 止 读 取 的 事件 。 

在 异步 读 取 文件 的 过 程 中 ， 出 现 错误 与 异常 都 可 以 使 用 FileError 接口 。 该 接口 主要 用 
于 异步 提示 错误 ， 当 FileReader 对 象 无 法 返回 数据 时 ， 将 形成 一 个 错误 属性 ， 而 该 属性 则 
是 一 个 FileError 接口 ， 通 过 该 接口 列 出 错误 与 异常 的 错误 代码 信息 。 

表 9-3 列 出 了 FileError 接口 中 提供 的 错误 代码 以 及 对 应 的 说 明 。 


表 9-3 ”FileError 接口 的 错误 代码 


错误 代码 说 明 
无 法 找到 文件 或 者 原文 件 已 经 被 修改 
由 于 安全 考虑 ， 无 法 读 取 文件 数据 


到 
3 由 abort 事件 触发 的 中 止 读 取 过 程 
4 
5 


代 草 内 圭 半 骂 9 1NLH 册 6 暴 驴 


由 于 权限 原因 ， 不 能 读 取 文件 数据 


ENCODING ERR 读 取 的 文件 太 大 ， 超 出 读 取 时 地 址 的 限制 
例如 ， 下 面 的 示例 代码 演示 了 处 理 读 取 文 件 时 的 异常 处 理 过 程 ; 


Var reader = new FileReader(); 

Feader .readAsText (file, "gb2312"); 

reader.onload = function(e){ // 添 加 onload 事件 
document .getElementById ("showInfo") .innerHTML = this.result; 


} 
reader .onerror=function (res){ // 添 加 onerror 事件 
var num = res.target.error.code; // 获 取 错 误 代码 
document .getElementById('showInfo') .innerHTML = "文件 无 法 显示 : "; 
if (num==1){ 
document .getElementById('showInfo') .innerHTML+=" 无 法 找到 或 原文 件 已 被 修改 !"; 
}else if (num==2){ 
document .getElementById('showInfo') .innerHTML+=" 无 法 获取 数据 文件 ! "; 
}else if (num==3){ 
document .getElementById('showInfo') .innerHTML+=" 中 止 文件 读 取 的 过 程 ! "; 
}else if(num==4) { 
document .getElementById('showInfo') .innerHTML+=" 无 权 读 取 数 据 文件 ! "; 
}else if (num==5){ 
document .getElementById('showInfo') .innerHTML+=" 读 取 的 文件 太 大 ! "; 
} 
} 


(1i6 实战 一 一 实现 文件 上 传 


通过 前 面 的 练习 ， 我 们 已 经 掌握 了 如 何 获取 选择 文件 的 基本 信息 ， 也 能 够 限制 文件 的 
类 型 和 读 取 文 件 的 内 容 。 但 是 这 些 文件 只 是 保存 在 本 地 ， 并 没有 实现 上 传 功能 。 
本 次 实战 将 使 用 HTML 5 结合 JSP 实现 将 用 户 选 择 的 多 个 文件 批量 上 传 到 服务 器 。 具 bb, XK 
体 步骤 如 下 。 CON 
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国 绍 01| 使 用 MyEclipse 工具 创建 一 个 名 为 fleupload 的 Web 项 目 。 

芒 国 02| 新 建 一 个 名 为 indexjsp 的 文件 作为 选择 文件 的 页 面 。 

芒 国 03| 在 页 面 中 创建 一 个 表单 ， 允 许 用 户 选择 多 个 文件 ， 并 且 可 以 查看 要 上 传 的 
图 片 文件 。 最 终 代码 如 下 所 示 : 

<h2> 上 传 图 片 </h2> 


<form action="upload" enctype="multipart/form-data" method="post"> 
选择 一 张 图 片 <input type="file" name="fileupload" value="upload" 

multiple="true" id="selFile" /><br> <input type="button" value=" 硕 览 " 

onClick="GetPicFile()" /><input type = "submit" value =" 上 传 "> 

</form> 

<div class="text" id="result"></div> 


在 这 里 要 注意 form 的 enctype 属性 值 必须 是 multipart/form-data，method 属性 值 必须 


是 post。 
辐 汶 04| 编写 单 击 “ 预 览 ” 按 钮 时 执行 的 JavaScript 函数 GetPicFile0， 具 体 代码 可 


参考 9.1.3 节 ， 这 里 不 再 重复 。 

在 fileupload 项 目 中 新 建 一 个 名 为 upload 的 Servlet。 在 doPost() 方 法 中 编写 
代码 ， 获 取 在 客户 端 选择 的 多 个 文件 ， 然 后 以 流 的 形式 写 到 项 目下 的 upload 目录 
中 。 代 码 如 下 : 


public void doPost (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 

response.setContentType ("text/html;charset=utf-8"); 
PrintWriter out = response.getWriter(); 
out.println( 
"<!IDOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); 
out.println ("<HTML>"); 
out .println(" <HEAD><TITLE>JSP 多 文件 上 传 后 台 程 序 </TITLE></HEAD>"); 
out.println(" <BODY>"); 


DiskFileItemFactory factory = new DiskFileItemFactory(); 
String path = request.getSession() .getServletContext () 
.getRealPath("/") + "upload/"; 
factory.setRepository (new File(path)); 
factory.setSizeThreshold(1024 * 1024); 
ServletFileUpload upload = new ServletFileUpload (factory); 
try { 
List<FileItem> list = 
(List<FileItem>) upload.parseRequest (request); 
out .println ("本 次 一 次 上 传 ” + 1ist.size() + "个 文件 。<br/>")，; 
out .println("<a href=\"index.jsp\"> 继 续 上 传 文件 </a>"); 
Iterator<FileItem> it = list.iterator(); // 遍历 list 
while (it.hasNext()) { 
FileItem fi = (FileItem)it.next(); // 类 型 转换 
System-out .println ("该 文件 表单 name 为 : " + fi.getFieldName()); 
System.out .println ("该 文件 文件 名 为 : " + fi.getName()); 
本 System.out .println ("该 文件 文件 类 型 为 : " + fi.getContentType()); 
> System.out .println ("该 文件 文件 大 小 为 : " + fi.getsize()); 
pss if (fi.isFormField()) {// 判断 该 FileItem 对 象 是 否 是 一 个 普通 表单 类 型 
String name = fi.getFieldName (); // 得 到 普通 表单 类 型 的 表单 名 


String content = null; 
try { 
content = fi.getstring("utf-8"); 
} catch (UnsupportedEncodingException e) { 
// TODO Auto-generated catch block 
e.printstackTrace (); 
} // 用 指定 编码 得 到 普通 表单 的 值 
request .setAttribute (name，content); // 键 值 放 入 request 对 象 


} else { 


1 
} 


上 EYE 
// 得 到 文件 表单 的 值 ， 就 是 用 户 本 地 的 文件 路 径 
String pathStr = fi.getName (); 
// 如 果 文件 表单 为 定 ， 则 不 处 理 
if (pathStr.trim() .equals("")) { 
continue; 
} 
int start = 
pathStr.1lastIndexOf ("\\"); // 得 到 文件 名 在 路 径 中 的 位 置 
String fileName = 
pathstr.substring (start + 1); // 得 到 文件 名 
File pathDest = new File (path，fileName) 
System.out .println (fileName); 
SYSEG -out println( = = i 
fi.write (pathDest); // 写 文件 
String name = fi.getFieldName ();// 得 到 文件 表单 的 名 称 
// 把 表单 名 、 文 件 名 放 入 request 
request.setAttribute (name, fileName); 
} catch (Exception e) { 
out .print ("存储 文件 错误 : ") 
e.printstackTrace (); 
return; 
} finally { // 立即 删除 保存 表单 字段 内 容 的 临时 文件 
fi.delete(); 
} 


} catch (FileUploadException e) { 
e.printstackTrace (); 

} catch (Exception e) { 
e.printstackTrace (); 


} 


out.println(" </BODY>"); 
out.println ("</HTML>"); 
out.flush(); 

out.close(); 


} 


注意 ， 要 正常 运行 上 面 的 代码 ， 还 需 导入 两 个 JAR 包 ， 分 别 commons-fileupload 和 
commons-io。 读 者 需要 手动 下 载 它们 并 放 到 项 目的 WebRoot\WEB-INF\ib 目录 中 。 

将 和 eupload 项 目 部 署 到 服务 器 。 在 浏览 器 中 输入 “http:/localhost8080 

/fileupload/” 进 入 选择 文件 界面 。 如 图 9-8 所 示 为 选择 了 三 个 文件 之 后 浏览 器 中 


的 预览 效果 。 
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9-8 ”预览 要 上 传 的 图 片 文件 


单 击 “ 上 传 ”按钮 将 把 文件 上 传 到 upload 目录 ， 并 且 可 以 继续 上 传 ， 上 传 
结果 如 图 9-9 所 示 。 


1 且 P 多 文件 上 全 后 台 性 床 。X 时 
€ 3 GDIocalhost8030/fileupload/upload 


本 次 一 次 上 传 3 个 文件 。 
继续 上 传 文件 


人 加- ep , upon 四 加 |E77Z 


基部 ”原职 纪 杂 片 。 新 半 文 伯 交 


面 怠 而 


Jalyfish 


9-9 上 传 结果 


9.2 拖 放 功能 


在 HIML 4 之 前 ， 如 果 要 实现 文件 (例如 文本 文件 、 图 像 文件 ) 的 拖 放 功能 ， 需 要 借助 
于 mousedown、mousemove 和 mouseup 事件 实现 在 浏览 器 内 部 的 拖 放 操作 。 而 在 HIML 5 
中 提供 了 对 文件 拖 放 的 支持 ， 下 面 详细 介绍 HTML 5 的 拖 放 API， 以 及 拖 放 对 象 的 使 用 。 


C21 拖 放 API 简 介 


HTML 5 提供 了 文件 拖 放 操作 的 API， 使 用 这 些 API， 不 仅 能 够 实现 浏览 器 内 部 的 拖 
放 操 作 ， 还 可 以 在 浏览 器 与 其 他 应 用 程序 之 间 实 现 数 据 传输 ， 同 时 大 大 简化 了 拖 放 的 实现 
代码 。 

在 实现 拖 放 时 需要 涉及 到 很 多 事件 ， 这 些 事 件 的 说 明 如 表 9-4 所 示 。 
)、 在 实现 拖 放 功能 之 前 ， 还 需要 将 想 要 拖 放 对 象 的 draggable 属性 设置 为 tue， 这 表示 多 
二 ， 许 该 元 素 进行 拖 放 。 另 外 ，imsg 元 素 和 a 元 素 (必须 指定 href 属性 ) 默 认 情况 下 允许 拖 放 。 


NN 


偶 
第 
<D 
表 9-.4 拖 放 事件 及 说 明 章 
事件 名 称 说 明 3 
Tr 开始 执行 拖 放 操作 ， 应 用 于 被 拖 放 元 素 本 
ee 拖 放 过 程 中 ， 应 用 于 被 拖 放 元 素 下 
i 被 拖 放 的 元 素 开始 进入 本 元 素 的 范围 内 ， 应 用 于 拖 放 过 程 中 鼠标 经 过 的 元 素 他 
dr 被 拖 放 的 元 素 正在 本 元 素 范围 内 移动 ， 应 用 于 拖 放 过 程 中 鼠标 经 过 的 元 素 和 
dee 被 拖 放 的 元 素 离开 本 元 素 的 范围 ， 应 用 于 拖 放 过 程 中 鼠标 经 过 的 元 素 
mn | 有 其 他 元 素 被 拖 放 到 了 本 元 素 中 ， 应 用 于 拖 放 的 目标 元 素 
站 拖 放 操作 结束 ， 应 用 于 拖 放 的 对 象 元 素 


假设 要 将 页 面 中 drag 元 素 拖 放 到 area 元 素 内 ， 大 致 步骤 如 下 。 
国 玫 01] 在 开始 拖 放 元 素 时 触发 drag 事件 ， 示 例 代码 如 下 所 示 : 


document .getElementById("drag") .addEventListener ("dragstart", draging, 
false); 


力 玫 02] 在 将 拖 放 的 源 对 象 放 到 目标 对 象 上 面 时 触发 drop 事件 ， 触 发 该 事件 之 后 调 
用 drop0 函 数 ， 示 例 代码 如 下 所 示 : 

document .getElementById ("area") .addEventListener ("drop", drop, false); 

国 玫 03] 将 拖 放 的 源 对 象 离开 目标 对 象 时 触发 dragleave 事件 ， 触 发 该 事件 之 后 调用 
dragleave() 函 数 ， 示 例 代 码 如 下 所 示 : 


document .getElementById("area") .addEventListener ("dragleave", dragleave, 
false); 


区 为 04| 添加 页 面 的 ondragover 事件 ， 示 例 代 码 如 下 : 

document .ondragover = function (e) { e.preventDefault(); } 

辆 加 05|] 添加 页 面 的 drop 事件 。 创 建 拖 搜索 件 监听 的 时 候 把 默认 的 行为 事件 禁用 ， 
因为 浏览 器 默认 有 拖 搜 行为 。HTML 5 中 dragover 事件 要 使 用 e.preventDefault() 
禁用 阻止 的 方法 ， 不 然 drop 事件 可 能 不 会 被 触发 。 示 例 代码 如 下 : 


document .ondrop = function (e) { e.preventDefault(); } 


DD 


CD 


9.2.2 拖 放 对 象 的 方法 和 属性 


一 般 情 况 下 拖 动 某 个 元 素 ， 然 后 把 它 拖 放 到 另外 某 个 元 素 上 也 需要 在 源 元 素 与 目标 元 
素 之 间 传 送 一 些 数据 。 

为 了 完成 这 项 数据 传送 任务 ，HTML 5 提供 了 拖 放 对 象 DataTransfer。 

DataTransfer 对 象 提 供 了 对 剪贴 板 的 访问 ， 以 便 在 拖 放 操 作 中 使 用 。 由 于 DataTransfer 
是 事件 对 象 的 属性 ， 所 以 只 能 在 拖 放 事件 的 事件 处 理 程序 中 访问 DataTransfer 对 象 。 

DataTransfer 对 象 既 可 以 在 源 对 象 中 使 用 ， 也 可 以 在 目标 对 象 中 使 用 。DataTransfer 对 
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象 有 多 个 方法 ， 常 用 方法 及 说 明 如 表 9-5 所 示 。 
表 9-5 DataTransfer 对 象 的 方法 说 明 


方法 名 称 说 明 

getData0 获取 由 setData0 中 保存 的 数据 并 且 进 行 返回 。 如 果 返 回 的 数据 不 存在 ， 则 返回 空 字 
符 串 

setData0) 为 元 素 添加 指定 的 数据 。 有 两 个 参数 ， 第 一 个 参数 是 一 个 字符 串 ， 表 示 保 存 的 数据 
类 型 ， 也 是 getData() 方 法 唯一 的 一 个 参数 ;第 二 个 参数 表示 数据 

clearData0 清除 以 特定 格式 保存 的 数据 。 如 果 未 指定 格式 ， 则 删除 当前 元 素 的 所 有 携带 数据 

addElement() 为 拖 动 操作 添加 一 个 元 素 。 添 加 这 个 元 素 只 影响 数据 ( 即 增加 作为 拖 动 源 而 影响 回调 
的 对 象 )， 不 会 影响 拖 动 操作 时 页 面 元 素 的 外 观 

setDragImage() | 指定 一 幅 图 像 ， 当 拖 动 发 生 时 ， 显 示 在 光标 下 方 。 该 方法 有 3 个 参数 ， 它 们 分 别 是 


要 显示 的 HTML 元 素 和 光标 在 图 像 中 的 x、y 坐标 。 其 中 ，HTML 元 素 可 以 是 一 张 
图 像 ， 也 可 以 是 其 他 元 素 
其 中 getData0 和 setData0 方 法 最 为 常用 ，setData0 方 法 用 于 源 事件 ， 以 便 提供 关于 将 
要 进行 传送 的 数据 。 相 应 地 ，getData0 方 法 用 于 目标 事件 ， 确 保 获取 的 数据 和 数据 格式 。 
例如 ， 可 以 通过 setData() 方 法 设置 一 个 文本 数据 ， 并 且 通 过 getData0 方 法 来 接收 数 
据 。 代 码 如 下 : 


event .dataTransfer.setData("text"，"this is a text data") 
Var text = event.dataTransfer.getData ("text"); 


DataTransfer 对 象 的 常用 属性 及 说 明 如 表 9-6 所 示 。 
表 9-6 DataTransfer 对 象 的 属性 说 明 


属性 名 称 说 明 
types 返回 在 dragstart 事件 出 发 时 为 元 素 存储 数据 的 格式 ， 如 果 是 外 部 文件 的 拖 放 ， 则 
返回 files 
dropEffect 返回 已 选择 的 拖 放 效果 ， 即 能 够 获取 被 拖 放 的 元 素 能 够 执行 哪 种 放置 行为 
effectAllowed 返回 允许 执行 的 拖 放 操 作 效 果 ， 即 表示 允许 拖 放 元 素 的 哪 种 dropEffect 


要 注意 dropEffect 属性 只 有 与 effectAllowed 属性 搭配 才 有 用 ， 如 果 它 所 设置 的 效果 与 
effectAllowed 属性 设置 的 效果 不 符 ， 则 拖 放 操作 失败 。dropEffect 属性 可 有 如 下 取 值 。 

@ ”none: 不 能 把 拖 动 的 元 素 放 在 这 里 。 这 是 除 文本 框 之 外 所 有 元 素 的 默认 值 。 

e@ move: 应 该 把 拖 动 的 元 素 移动 到 放置 目标 。 

@ copy: 应 该 把 拖 动 的 元 素 复制 到 放置 目标 。 

e@ jlink: 表示 放置 目标 会 打开 拖 动 的 元 素 ( 但 拖 动 的 元 素 必 须 是 一 个 链接 ， 存 在 
URL). 
天 2 SN< 与 dropEffect 属性 相 比 ，effectAllowed 属性 的 取 值 较 多 ， 有 具体 说 明 如 下 。 
@ none: 被 拖 动 的 元 素 不 能 有 任何 行为 。 


NN 


move: 只 人 允许 值 为 movedropEffect。 

copy: 只 允许 值 为 copy 的 dropEffect。 

link: 只 允许 值 为 link 的 dropEffect。 

linkMove: 人 允许 值 为 link 和 move 的 dropEffect。 
copyMove: 允许 值 为 copy 和 link 的 dropEffect。 
copyLink: 允许 值 为 copy 和 link 的 dropEffect。 

uninitialized: 没有 该 被 拖 动 元 素 放置 行为 。 

all: 允许 任意 dropEffect。 
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慎 注意 : 如 果 要 使 用 dropEffect 属性 ， 必 须 在 ondraggenter 事件 处 理 程序 中 针对 目 
标 元 素 进行 设置 § 如 果 要 使 用 effectAllowed 属性 ， 必 须 在 ondraggstart 事件 处 理 程序 中 
进行 设置 。 

如 下 代码 展示 了 属性 的 简单 使 用 : 


source.addEventListener ("dragstart", function(ev){ 


var dt = ev.dataTransfer; // 向 dataTransfer 对 象 中 追加 数据 
dt.effectAllowed = "all"; 
dt.setData ("text"，" 拖 动 文 本 "); // 设 置 拖 动 元 素 的 值 
}, false); 
dest.addEventListener ("dragend", function(ev){ 
ev.preventDefault (); // 不 执行 默认 处 理 (拒绝 被 拖 放 ) 


}) 

dropEffect 属性 与 effectAllowed 属性 的 值 设 置 必须 合法 ， 下 面 总 结 了 一 些 常 用 的 规则 : 

@ ”如 果 effectAllowed 属性 设置 为 none， 则 不 允许 拖 放 要 拖 放 的 元 素 。 

@ ”如 果 dropEffect 属性 设置 为 none， 则 不 允许 被 拖 放 到 目标 元 素 中 。 

@ ”如 果 effectAllowed 属性 设置 为 all 或 不 设置 ， 则 dropEffect 属性 允许 被 设置 为 任 
何 值 ， 并 且 按 其 指定 的 值 进行 显示 。 

@ ”如 果 effectAllowed 属性 设置 为 具体 效果 值 (不 为 none 和 alD) 时 ，dropEffect 属性 也 
设置 了 具体 效果 值 ， 则 两 个 值 必须 完全 相等 ， 否 则 不 允许 被 拖 放 元 素 拖 放 到 目标 
元 素 中 。 


9.2.3 ”实战 一 一 模拟 图 片 删 除 


本 项 目 案例 通过 拖 放 API 将 相册 中 的 某 张 图 片 以 拖 动 的 方式 放 入 回收 站 ， 从 而 实现 相 
册 管 理 功能 。 其 具体 步骤 如 下 。 
工 罚 01| 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 3 个 div 元 素 ， 它 们 分 别 表 
示 图 片 列表 、 显 示 删 除 图 片 的 效果 以 及 显示 回收 站 。 然 后 向 第 一 个 div 元 素 中 添 
加 蕊 和 二 元 素 ， 它 们 实现 显示 多 张 图 片 的 效果 。 页 面 的 具体 代码 如 下 : 
<body onLoad="init();"> 
<h2> 相 册 管 理 </h2> 


<div class="text" id="result"> 
<div id="picList"> 
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id="1i01"><img src="images/1.jpg" draggable="true" /></1i> 

1i02"><img src="images/2.jpg" draggable="true" /></1i> 

1i03"><img src="images/3.jpg" draggable="true" /></1i> 
<1i id="1i04"><img src="images/4.jpg" draggable="true" /></1i> 

</ul> 

</div> 

<div style="clear:both"></div> 

<div id="status" style="display:none;"><p id="pStatus" class="del"></p> 

</div> 

<div id="laji"></div> 

</div> 

</body> 


辐 02 | 页 面 加 载 调用 自 定义 的 init0 函 数 ， 该 函数 的 具体 代码 如 下 : 
var intDeleNum = 0; // 声 明 删除 图 片 的 变量 


function init(){ 
var drag = document .getElementsByTagName ("1i"); // 获 取 所 有 的 1i 元 素 


for (var i=0; i<drag.length; i++){ // 遍 历 该 元 素 
drag [i] .addEventListener ("dragstart", function(e){ // 添 加 dragstart 事件 
var dt = e.dataTransfer; // 获 取 dataTransfer 事件 
dt.setData("text/plain", this.id); // 向 对 象 中 存 入 数据 
},false); 
var recy = document .getElementById ("laji"); // 获 取 目 标 元 素 
recy.addEventListener ("drop", function(e){ // 添 加 drop 事件 
var dt = e.dataTransfer; // 获 取 dataTransfer 对 象 
var intval = dt.getData ("text/plain"); // 从 对 象 中 获取 数据 
Drop (intval); // 删 除 图 片 
},false); 


} 
上 述 代 码 中 先 声 明 全 局 变量 intDeleNum， 该 变量 保存 删除 图 片 的 数量 。 接 着 在 init0 
函数 中 首先 通过 getElementsByTagName() 方 法 获取 全 部 相册 中 的 元 素 ， 然 后 遍历 全 部 元 素 
时 为 每 一 张 图 片 元 素 添加 拖 动 时 触发 的 dragstart 事件 。 在 该 事件 中 调用 dataTransfer 对 象 
存 入 每 一 张 图 片 元 素 对 应 的 ID 号 ， 即 this.id 的 值 。 然 后 获取 ID 为 laji 的 目标 元 素 ， 向 该 
元 素 添 加 drop 事件 ， 在 该 事件 中 调用 getData0 函 数 读 取 存 入 的 单个 图 片 元 素 的 ID 号 ,将 
该 ID 号 作为 实 参 调用 Drop0 函 数 移 除 图 片 。 
Drop0 函 数 中 通过 removeChild0 方 法 移 除 相 册 中 指定 的 图 片 ， 形 成 删除 的 
效果 ， 同 时 通过 全 局 变量 intDeleNum 累计 删除 图 片 的 数量 ， 并 将 该 总 数量 的 值 
显示 到 页 面 中 。 该 函数 的 具体 代码 如 下 : 


function Drop (id) 


出 


var node = document .getElementById (id); // 获 取 指定 的 1i 元 素 
node.parentNode.removeChild (node); // 移 除 图 片 
intDeleNumt+; // 累 计 删 除数 量 

"> document .getElementByIlId("status") .style.display = "block"; 

A 中 < document -getElementById("PpStatus") .innerHTML = 


"已 经 成 功 删 除 ”+ intDeleNum + " 张 图 片 ": 


CD 
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Ke 
葬 洲 04| 通过 document 对 象 添加 页 面 的 dragover 事件 和 drop 事件 ， 它 们 都 调用 章 
epreventDefault() 方 法 取消 页 面 的 默认 值 。 具 体 代码 如 下 : 到 
document .ondragover = function(e) 三 
{ a 
e.preventDefault (); // 阻 止 默认 方法 ， 取 消 拒绝 被 拖 放 和 

} 
document .ondrop = function(e) 全 
{ 特 
e.preventDefault (); // 阻 止 默认 方法 ， 取 消 拒绝 被 拖 放 性 


} 


上 述 代码 中 添加 页 面 的 dragover 事件 和 drop 事件 ， 它 们 都 使 用 e.preventDefault0 方 法 
取消 页 面 的 默认 值 ， 允 许 拖 放 页 面 。 
为 页 面 中 的 元 素 添加 样式 效果 ， 其 主要 的 样式 代码 如 下 所 示 : 


#picList img{ 
width: 100px; 
height: 100px; 

} 

#picList ul 1i{ 
float: left; 
list-style-type: none; 
list-style: none; 
margin: 3px; 

} 

#1ajif{ 
background-image: url(images/5.gif); 
border: lpx solid gray; 
width: 203px; 
height: 254px; 
margin: auto; 
text-align: center; 


运行 本 案例 的 代码 进行 测试 ， 拖 动 删除 图 片 时 的 效果 如 图 9-10 所 示 。 删 除 
图 片 成 功 时 的 效果 如 图 9-11 所 示 。 


9-10” 拖 动 删 除 图 片 时 的 效果 5 AN 
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9-11 删除 图 片 成 功 时 的 效果 


9.3 ”新 增 的 客户 端 数据 存储 特性 


随 着 Web 应 用 的 发 展 ， 应 用 开发 者 越 来 越 关注 的 一 个 问题 是 ， 如 何 更 好 地 在 客户 端 存 
储 数 据 。 在 HTML 4 中 通常 使 用 Cookie 存储 机 制 ， 但 是 由 于 cookies 有 限制 保存 数据 空间 
大 小 、 数 据 保密 性 差 、 代 码 操作 复杂 等 缺点 ， 已 经 完全 无 法 满足 如 今 开发 者 的 需求 。 

HTML 5 规范 定义 了 一 种 在 客户 端 存储 数据 的 更 好 的 方式 ( 即 Web 存储 )， 本 节 将 介绍 

它 包 含 两 种 不 同 的 存储 对 象 类 型 : sessionStorage 和 localStorage。 这 一 节 我 们 就 主要 来 
介绍 sessionStorage 对 象 和 localStorage 对 象 。 


3.1 客户 端 存储 对 象 简介 


HTML 5 的 客户 端 存储 是 在 Cookie 基础 上 发 展 起 来 的 ， 它 与 Cookie 相 比 ， 具 有 如 下 
优势 。 
@ 存储 空间 更 大 : 默认 情况 下 可 以 存储 5MB 大 小 的 数据 ， 虽 然 不 同 浏览 器 支持 的 
数据 大 小 会 有 所 不 同 ， 但 是 都 要 比 Cookie 大 得 多 。 
@ 存储 内 容 不 会 发 送 到 服务 器 : Cookie 的 内 容 会 随 着 请 求 一 起 发 送 到 服务 器 ， 这 对 
于 本 地 存储 的 数据 是 一 种 带宽 浪费 。 而 客户 端 存储 中 的 数据 仅仅 是 保存 在 本 地 ， 
不 会 与 服务 器 发 生 任何 交互 。 
e@ ”更 多 丰富 易 用 的 接口 : 客户 端 存储 提供 了 一 套 更 为 丰富 的 接口 ， 使 得 数据 操作 更 
为 简便 。 
HTML 5 的 客户 端 存 储 机 制 主要 由 两 大 对 象 组 成 ， 即 localStorage 和 sessionStorage。 
其 中 sessionStorage 用 于 存储 与 用 户 会 话 有 关 的 数据 ， 作 用 周期 与 会 话 相同 ;localStorage 
用 于 持久 化 的 存储 数据 ， 除 非 手动 删除 数据 ， 和 否则 数据 永远 不 会 过 期 。 


1. sessionStorage 对 象 
sessionStorage 对 象 所 存储 的 数据 只 有 在 同一 个 会 话 中 的 页 面 才能 访问 ， 并 且 当 会 话 结 


束 后 ， 数 据 也 随 之 销毁 。 因 此 ，sessionStorage 不 是 一 种 持久 化 的 本 地 存储 ， 仅 仅 是 会 话 级 
别 的 存储 。 

sessionStorage 对 象 最 常用 的 方法 如 下 所 示 。 

@ setItem(key,value): 参数 key 表示 被 保存 内 容 的 键 ，value 表示 被 保存 内 容 的 值 。 
getItem(key): 获取 指定 key 本 地 存储 的 值 ， 如 果 不 存在 ， 则 返回 一 个 null 值 。 
TemoveItem(key): 删除 指定 key 本 地 存储 的 值 。 
clear0: 清除 localStorage 对 象 中 所 有 的 数据 。 
key0: 获取 指定 下 标的 键 名 称 (如 同 Array)。 


2. localStorage 对 象 


使 用 sessionStorage 对 象 保 存 的 用 户 会 话 数据 在 关闭 浏览 器 之 后 会 丢失 。 因 此 ， 如 果 
需要 在 客户 端 保存 永久 数据 ， 则 应 该 使 用 localStorage 对 象 。localStorage 对 象 可 以 将 数据 
长 期 保存 在 客户 端 ， 直 至 手动 清除 为 止 。 

localStorage 对 象 同 sessionStorage 对 象 一 样 ， 最 常用 的 方法 有 setItem()、getItem()、 
removeltem()、clear0 和 key0， 在 这 里 就 不 再 详细 介绍 这 些 方法 。 


9.3.2 ”操作 本 地 数据 


由 于 localStorage 对 象 和 sessionStorage 对 象 的 方法 是 一 样 的 ， 本 节 以 localStorage 对 
象 为 例 讲解 如 何 写 入 数据 、 读 取 数 据 以 及 清空 数据 。 


1. 判断 浏览 器 是 否 支 持 


使 用 localStorage 对 象 之 前 ， 需 要 判断 浏览 器 是 否 支持 该 对 象 ， 如 果 不 支 持 ， 它 可 能 
会 为 空 。 判 断代 码 如 下 : 
function getLocalStorage () { 
try { 
if(!!window.localStorage) // 如 果 浏 览 器 支持 ， 则 返回 该 对 象 
return window.localStorage; 
} catch(e) { 
return undefined; 
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} 
} 


2. 保存 数据 
要 向 客户 端 中 保存 一 个 数据 ， 需 要 调用 setItem0) 方 法 ， 其 调用 格式 如 下 所 示 : 


localStorage.setItem(key,value) 


其 中 ， 参 数 key 表示 数据 的 键 名 ， 参 数 value 表示 要 保存 的 数据 。 一 旦 键 名 设置 成 
功 ， 则 不 允许 修改 ， 也 不 能 重复 ， 如 果 键 名 重复 ， 那 么 将 用 新 的 键 值 取代 原 有 的 键 值 。 

【 例 9.7】 

创建 一 个 示例 ， 使 用 localStorage 对 象 将 网 站 的 名 称 保存 到 客户 端 。 代 码 如 下 所 示 : 
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var localStorage = getLocalStorage (); // 检 测 浏览 器 是 否 支持 localStorage 对 象 
if(localSstorage){ 


localstorage.setItem("sitename"," 窗 内 网 "); // 存 储 网 站 名 称 
}elsef{ 


alert ("您 的 浏览 器 不 支持 localStorage 对 象 ") ; 
} 


上 述 代 码 使 用 localStorage 对 象 的 setItem0) 方 法 向 客户 端 写 入 一 个 键 名 为 sitename， 值 
为 “ 窗 内 网 ”的 数据 。 

除了 setItem0 方 法 ， 也 可 以 使 用 localStorage[key]=value 或 者 localStorage.key=value 形 
式 写 入 数据 。 例 如 ， 上 面 的 语 也 可 写成 如 下 形式 : 


localStorage ["sitename"] =" 窗 内 网 "; 
localStorage.sitename = " 窗 内 网 "; 


3， 读 取 数 据 

如 果 要 读 取 被 保存 的 数据 ， 可 以 调用 localStorage 对 象 中 getItem0) 方 法 ， 其 调用 格式 
如 下 : 

localStorage.getItem(key); 

其 中 ， 参 数 key 表示 数据 保存 时 的 键 名 ， 该 方法 将 返回 一 个 指定 键 名 对 应 的 键 值 ， 如 
果 不 存在 ， 则 返回 一 个 null 值 。 

例如 要 读 取 上 面 保存 的 网 站 名 称 ， 可 用 如 下 代码 : 


Var sitename = localStorage.getItem("sitename"); // 获 取 网 站 名 称 


时 注意 : 尽管 使 用 localStorage 对 象 可 以 将 数据 长 期 保存 在 客户 端 ， 但 在 跨 浏览 器 
读 取 数 据 时 ， 被 保存 的 数据 也 不 可 共享 。 即 每 一 个 浏览 器 只 能 读 取 各 自 浏览 器 中 保存 的 
数据 ， 不 能 访问 其 他 浏览 器 中 保存 的 数据 。 


4， 清 空 数据 


调用 localStorage 对 象 中 的 removeItem() 方 法 可 以 删除 某 个 键 名 对 应 的 数据 。 但 是 ， 有 
时 保存 数据 很 多 ， 如 果 使 用 removeItem() 方 法 逐条 删除 比较 麻烦 。 此 时 ， 可 以 调用 
localStorage 对 象 中 的 另 一 个 方法 clear0， 该 方法 的 功能 是 清空 全 部 localStorage 对 象 保存 
的 数据 ， 其 调用 格式 如 下 所 示 : 


localSstorage.clear (); 
clear() 方 法 是 一 个 无 参数 方法 ， 表 示 清 空 全 部 的 数据 。 
5. 遍历 数据 


使 用 遍历 可 以 查看 localStorage 对 象 中 保存 的 全 部 数据 信息 。 在 遍历 过 程 中 需要 借 
localStorage 对 象 的 length 属性 和 key 属性 ， 属 性 说 明 如 下 。 
@ length: 表示 localStorage 对 象 中 保存 数据 的 总 量 。 
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@ key: 表示 保存 数据 时 的 键 名 。 该 属性 常 与 索引 (index) 配 合 使 用 ， 表 示 第 几 条 键 名 
对 应 的 数据 记录 。 其 中 ， 索 引号 以 0 值 开始 ， 例 如 第 2 条 键 名 对 应 的 数据 index 
值 应 该 为 1。 

【 例 9.8】 


使 用 localStorage 对 和 象 实现 一 个 收藏 夹 的 保存 、 查 看 和 清空 功能 。 具 体 步 又 如 下 。 

鸭 玉 01| 新 建 一 个 HTML 页 面 。 在 页 面 中 添加 输入 网 站 名 称 和 地 址 的 文本 框 ， 以 及 
保存 和 清除 按钮 ， 代 码 如 下 : 

<h2> 管 理 收藏 夹 </n2> 

网 站 名 称 : <input name="sitename" type="text" id="sitename" /><br/> 

网 站 地 址 : <input name="siteurl" type="text" id="siteurl" /> <br/> 

<input type="botton" value=" 保 存 " onclick="SaveData()"/> 

<input type="botton" value=" 全 部 清除 "” onclick="ClearData()"/> 


使 用 table 元 素 制作 一 个 表格 来 显示 当前 收藏 夹 的 内 容 。 如 下 所 示 : 


<table width="100%" cellspacing="1" cellpadding="1" border="0" 
class="mytable"> 
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<tr> 
<th> 编 号 </th> 
<th> 网 站 名 称 </th> 
<th> 网 站 URL 地 址 </th> 
<VEr> 
<tbody id="list"> </tbody> 
</table> 


输入 要 保存 的 网 站 名 称 和 地 址 之 后 单 击 “ 保 存 ” 按 钮 ， 将 触发 SaveData0 
函数 。SaveData0 函 数 的 实现 代码 如 下 : 


function SaveData() 


{ 


var localStorage = getLocalStorage(); // 创 建 1ocalStorage 对 象 
if(localStorage){ 
var id = $("sitename") .value; // 获 取 网 站 名 称 
var url = $("siteurl") .value; // 获 取 网 站 地 址 
localStorage.setItem(id,url); // 保 存 数据 
loadAllData (); // 加 载 数据 
}elsef{ 


alert ("您 的 浏览 器 不 支持 localStorage 对 象 "); 
} 
} 


上 述 代码 首先 创建 一 个 localStorage 对 象 ， 然 后 判断 该 对 象 是 否 为 空 。 如 果 不 为 空 再 
使 用 网 站 名 称 作为 键 ， 网 站 地 址 作为 值 保存 到 客户 端 。 
葬 加 04| loadAllData0 函 数 的 作用 是 从 localStorage 对 象 中 遍历 所 有 的 收藏 夹 并 显示 
到 页 面 上 的 表格 中 。 具 体 代码 如 下 : 


function loadAllData() 
Var localStorage = getLocalStorage(); 
Mar SLearM = rs 
for (var i=0; i<localStorage.length; i++){ // 遍 历 所 有 数据 A 全 J 
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var strkey = localStorage.key (i); // 根 据 索 引 获 取 键 名 ， 即 网 站 名 称 
// 根 据 键 名 获取 数据 值 ， 即 网 站 地 址 


var strval = LocalStorage -getItem(strkey) > 


strHTML += "<tr><td><img src=\"images/manico.gif\" />" 
+4 (EF 4 "<HEd> "> 

StrHTML += "<td>" + strkey + "</td>"; 

strHTML += "<td>" + strval + "</td>"; 

StIHTML += "</tr>"; 


1 
$ ("list") .innerHTML = strHTML; // 追 加 到 网 页 

} 

创建 ClearData0 函 数 ， 调 用 localStorage 对 象 的 clear0 方 法 清空 所 有 数据 。 
代码 如 下 : 


function ClearData() 
{ 


Var localStorage = getLocalStorage(); 
localStorage.clear (); 
loadAllData (); 

} 


如 上 面 步骤 所 示 ， 除 了 在 添加 和 清空 数据 时 需要 更 新 页 面 之 外 ， 还 需要 在 
页 面 加载 完 成 后 更 新 数据 。 代 码 如 下 所 示 ; 

window.onload = loadAllData; 

在 浏览 器 中 运行 HTML 页 面 ， 第 一 次 加 载 时 列表 为 空 ， 界 面 效果 如 图 9-12 
所 示 。 


© Dfile///D:/wwwRoot/Blog3.html 


芝 管理 收藏 夹 


网 站 名 称 : 
tt: 

| 保存 | | 全 部 清除 
编号 网 站 名 称 


9-12 ”初始 界面 


国 轨 08| 当 输 入 网 站 名 称 和 网 站 地 址 并 单 击 “ 保 存 ” 按 钮 之 后 ， 下 面 的 表格 会 立即 
显示 出 来 。 如 图 9-13 所 示 为 添加 3 个 网 站 时 的 运行 效果 。 

步骤 [ 国 在 Chrome 浏览 器 中 按 F12 键 ， 从 Resources 选项 卡 下 单 击 Local Storage 标 
签 ， 可 以 查看 loccalStorage 对 象 在 本 地 保存 的 数据 。 此 时 会 看 到 与 界面 上 显示 的 
一 致 ， 如 图 9-14 所 示 。 


DN 


" 
© © fle//D/wwwRootBlog3html 
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9-14 ”查看 保存 的 数据 


此 注意 : 各 浏览 器 查看 localStorage 对 象 所 保存 的 数据 方式 不 完全 相同 ，Firefox 使 
用 Firebug 调试 工具 作为 存储 查看 器 。 


辐 凡 10| 最 后 单 击 “ 全 部 清除 ”按钮 ， 所 有 数据 都 会 被 删除 ， 如 图 9-15 所 示 。 


日 " 
O file///D/ wwwRoot/Blog3 html 
全 生理 六 六 天 


9-15 ”删除 数据 


9.3.3 ”实战 一 一 以 JSON 方 式 存 取 数据 


无 论 localStorage 对 象 还 是 sessionStorage 对 象 ， 都 是 通过 键 值 对 来 存储 数据 的 。 因 此 h CC 
它们 实现 的 只 是 支持 字符 串 到 字符 串 的 映射 ， 如 果 要 存储 很 多 的 键 值 内 容 ， 它 们 的 问题 就 SP 
出 现 了 : 处 理 相对 复杂 ， 扩 展 性 差 ， 数 据 结构 不 合理 等 。 
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为 了 解决 这 一 问题 HTML 5 中 还 可 以 通过 使 用 JSON 对 象 转换 数据 ， 实 现存 储 更 多 
数据 的 功能 。JSON 对 象 的 常用 方法 如 下 。 

@ JSON.parse(data): 参数 data 表示 localStorage 对 象 获取 的 数据 ， 调 用 该 方法 返回 
一 个 装载 data 数据 的 JSON 对 象 。 

@ JSON-stringify(obj): 参数 obj 表示 一 个 任意 的 实体 对 象 ， 调 用 该 方法 返回 一 个 由 
实体 对 象 转 成 JSON 格式 的 文本 数据 集 。 

下 面 通过 具体 的 案例 讲解 JSON 方式 的 数据 保存 与 读 取 。 具 体 步骤 如 下 。 

创建 一 个 HTML 页 面 。 编 写 用 于 输入 网 站 收藏 夹 信息 的 布局 代码 ， 并 且 可 
以 根据 网 站 名 称 进行 搜索 ， 以 及 显示 搜索 结果 的 表格 。 代 码 如 下 所 示 : 

<h2> 管 理 收藏 夹 </h2> 

网 站 编号 : <input name="sitename" type="text" id="siteid" /> <br/> 

网 站 名 称 : <input name="sitename" type="text" id="sitename" /> <br/> 

网 站 地 址 : <input name="siteurl" type="text" id="siteurl" /> <br/> 

网 站 备注 : <input name="siteurl" type="text" id="sitetext" /> <br/> 

<input name=" 按 钮 " type="button" value=" 保 存 " onclick="SaveData()"/> <br/> 

根据 网 站 名 称 搜 索 :<input type="text" id="namekey"> 

<input type="button" value=" 检 索 " onclick="findSstorage();" /> <hr/> 

<div class="text"> 


<table width="100%" cellspacing="1" cellpadding="1" border="0" 
class="mytable"> 


<tr> 
<th> 编 号 </th> 
<th> 网 站 名 称 </th> 
<th> 网 站 URL 地 址 </th><th> 备 注 </th> 
</tr> 
<tbody id="list"> 
</tbody> 
</table> 


在 页 面 中 可 以 输入 网 站 编号 、 名 称 、 地 址 和 备注 ， 单 击 “ 保 存 ” 按 钮 之 
后 ， 将 以 JSON 形式 保存 到 客户 端 。 实 现代 码 如 下 : 


function SaveData(){ 
Var localStorage = getLocalStorage(); 
var data = new Object; // 创 建 JSON 对 象 
data.id = $ ("siteid") .value; 
data.name = $ ("sitename") .value; 
data.url = $("siteurl") .value; 
data.text = $ ("sitetext") .value; 
Var str = JSON.stringify(data); 
localStorage.setItem(data.name, str); // 保 存 数 据 
alert ("数据 已 保存 ") ; 

} 


在 上 述 代码 中 ， 使 用 JSON.stringify0 方 法 把 对 象 转换 成 ISON 格式 的 文本 数据 ， 然 后 
调用 setItem() 方 法 保存 JSON 转换 的 文本 数据 。 
国贸 03| 当 保存 了 多 个 JSON 对 象 数据 之 后 ， 可 以 通过 网 站 名 称 作为 关键 字 查找 详 
细 信 息 。 如 下 所 示 为 “检索 ”按钮 执行 的 findStorageO 函 数 代码 : 


NO 一 


function findstorage(){ 
Var localStorage = getLocalStorage(); 
Var key = $ ("namekey") .value; 
var siteObject = localStorage.getItem(key); 
var data = JSON.parse (siteObject); 
Var strHTML = 

"<tr><td><img src=\"images/manico.gif\" />" + data.id + "</td>"; 

strHTML += "<td>" + data.name + "</td>"; 
StrHIMb 4= <Ed>” Todatacurl Et "</Ed>" > 
strHTML += "<td>" + data.text + "</td>"; 
strHTML += "</tr>"; 
$ ("list") .innerHTML = strHTML; 
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} 
findStorage0 函 数 使 用 网 站 名 称 作为 键 ， 调 用 getitem() 方 法 获得 它 的 数据 值 。 再 调用 
JSON 的 parse() 方 法 将 localStorage 中 获取 的 数据 转换 成 JSON 对 象 ， 最 后 使 用 “data. 对 象 
名 ”重新 赋值 。 
在 浏览 器 中 运行 页 面 ， 向 客户 端 保存 一 些 网 站 信息 。 然 后 输入 其 中 一 个 网 
站 的 名 称 ， 再 单 击 “ 检 索 ” 按 钮 查看 结果 ， 如 图 9-16 所 示 。 


eh 


9 
:|google 
:lwww google com 


* 国 Session songe 
> 居 cookie 


图 9-16 ”使 用 JSON 读 取 数 据 


9.4 新 增 的 本 地 数据 库 特 性 


localStorage 对 象 和 sessionStorage 对 象 虽 然 提 供 了 比 Cookie 更 好 、 更 快 和 容量 更 大 的 
存储 数据 ， 但 是 ， 如 果 数 据 之 间 的 关系 比较 复杂 ， 并 且 存 储 的 数据 容量 比较 大 ， 这 些 空间 
往往 也 不 能 够 满足 用 户 的 需要 。 这 时 可 以 使 用 HIML 5 的 另 一 个 新 特性 一 一 本 地 数据 库 。 

所 谓 本 地 数据 库 ， 就 是 HIML 5 内 置 的 SQLite 数据 库 的 功能 ， 能 在 客户 端 实现 关系 
数据 库 的 功能 ， 下 面 详 细 介绍 其 应 用 。 
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全; HTML 5 本 地 数据 库 简介 


在 HIML 4 以 及 之 前 的 版 本 中 ， 数 据 库 只 能 存放 在 服务 器 端 ， 通 过 动态 语言 来 访问 数 
据 库 。 但 是 在 HIML 5 中 ， 可 以 像 本 地 文件 那样 轻松 地 对 内 置 数据 库 进 行 直接 访问 。 

HTML 5 本 地 数据 库 全 称 是 Web SQL DataBase， 它 提供 了 关系 数据 库 的 基本 功能 ， 可 
以 存储 页 面 中 交互 的 、 复 杂 的 数据 。 它 既 可 以 保存 数据 ， 也 能 缓存 从 服务 器 获取 的 数据 。 
HTML 5 本 地 数据 库 通过 事务 驱动 ， 实 现 对 数据 的 管理 。 因 此 ， 它 可 以 支持 多 浏览 器 的 并 
发 操作 ， 而 不 发 生存 储 时 的 冲突 。 

与 客户 端 数据 存储 相 比 ，HTML 5 本 地 数据 库 具有 如 下 优势 : 

@ ”可 以 自 定义 要 设置 的 存储 空间 。 

@ ”可 以 跨 域 访 问 。 

e@ 存储 结构 更 加 自由 。 

@ ”可 以 方便 地 使 用 Web SQL 进行 读 写 。 

要 通过 HTML 5 本 地 数据 库存 储 数据 ， 第 一 步 就 是 创建 或 打开 一 个 数据 库 。 这 需要 调 
用 openDatabase() 方 法 ， 该 方法 的 语法 格式 如 下 : 


openDatabase (DBName, DBVersion, DBDescribe, DBSize,Callback ()); 


其 中 ， 参 数 DBName 表示 数据 库 名 称 ; 参数 DBVersion 表示 版 本 号 ; 参数 
DBDescribe 表示 对 数据 库 的 描述 ， 参 数 DBSize 表示 数据 库 的 大 小 ， 单 位 为 字 节 。 如 果 是 
2MB， 必 须 写 成 2*1024*1024; 参数 Callback0 表 示 创 建 或 打开 数据 库 成 功 后 执行 的 一 个 回 
调 函 数 。 

调用 openDatabase() 方 法 后 ， 如 果 指 定 的 数据 库 名 存在 ， 则 打开 该 数据 库 ， 和 否则 新 创 
建 一 个 指定 名 称 的 空 数据 库 。 

例如 ， 下 面 的 示例 代码 演示 了 如 何 创建 一 个 数据 库 : 

function CreateDatabase(){ 

var db; 


db = openDatabase('studentDB','2.0','stumanager',2*1024*1024, 
function(){ 

alert ("数据 库 创 建成 功 ") ; 
1); 
E 


上 述 代码 创建 了 一 个 名 为 studentDB， 版 本 号 为 2.0 的 2MB 数据 库 对 象 ， 如 果 创 建成 
则 执行 回调 函数 ， 在 回调 函数 中 显示 执行 成 功 的 提示 信息 。 


功 
9.4.2 数据 库 操作 API 


在 创建 和 打开 数据 库 之 后 便 可 以 使 用 HTML 5 本 地 数据 库 提 供 的 API 对 数据 进行 管 
理 。 其 中 最 常用 的 是 transaction() 方 法 和 executeSql0 方 法 。 


1.，transaction() 方 法 

transaction() 方 法 用 来 执行 事务 处 理 。 使 用 事务 处 理 可 以 防止 在 对 数据 库 进行 访问 及 执 
行 有 关 操 作 的 时 候 受 到 外 界 打扰 。 因 为 在 Web 上 ， 同 时 会 有 许多 用 户 都 在 对 页 面 进行 访 
问 。 在 访问 数据 库 的 过 程 中 ， 如 果 正 在 操作 的 数据 被 别 的 用 户 给 修改 的 话 ， 也 会 引起 很 多 
意 想 不 到 的 后 果 。 因 此 ， 可 以 使 用 事务 来 达到 在 操作 完成 之 前 ， 阻 止 其 他 用 户 访问 数据 库 
的 目的 。 

transaction() 的 使 用 非常 简单 ， 直 接 通过 返回 的 数据 库 对 象 调用 即 可 。 基 本 语法 如 下 : 


transaction(callbackFun,errorCallbackFun, successCallbackFun); 


在 上 述 语 法 形式 中 ， 可 以 传 入 3 个 参数 ， 具 体 说 明 如 下 。 

@ callbackFun: 回调 函数 ， 在 该 函数 中 执行 访问 数据 库 的 SQL 语句 操作 。 

@ errorCallbackFun: 发 生 错误 时 调用 的 回调 函数 。 

@ successCallbackFun: 执行 成 功 时 的 回调 函数 。 

一 般 情况 下 ， 使 用 transaction0) 时 传 入 一 个 类 型 事务 的 函数 参数 tx 最 为 常用 ， 它 可 以 
创建 表 或 者 执行 操作 语句 。 如 下 代码 创建 了 一 个 数据 库 表 : 


db.transaction(function (tx){ 
tx.executeSql] ("CREATE TABLE IF NOT EXISTS User (id unique, text)"); 


}) 


2. executeSql() 方 法 

executeSql0) 方 法 通常 用 来 执行 SQL 语句 ， 其 调用 格式 如 下 所 示 : 

executeSdql (sqlString, [Arguments],SuccessCallback, ErrorCallback); 

其 中 ， 参 数 sqlString 表示 需要 执行 的 SQL 语句 ;参数 Arguments 表示 语句 需要 的 实 
参 ; 参数 SuccessCallback 表示 SQL 语句 执行 成 功 时 的 回调 函数 ， 参 数 ErrorCallback) 表 示 
SQL 语句 执行 出 错时 的 回调 函数 。 

例如 ，executeSql0 方 法 的 正确 使 用 方法 如 下 : 

executeSql ("insert into student value(?,?,?,?)", [01," 王 倩 ", 22,556]); 

其 中 ，“?” 形 参 的 数量 必须 与 后 面 的 实 参数 量 完全 对 应 ， 如 果 SQL 语句 中 没有 “?” 
形 参 ， 第 二 个 参数 中 不 允许 用 户 有 任何 内 容 出 错 ， 和 否则 执行 SQL 语句 时 将 会 报错 。 


9.4.3 ”实战 一 一 实现 基于 数据 库 的 收藏 夹 管理 


在 93 节 我 们 详细 介绍 了 客户 端的 数据 存储 机 制 ， 并 使 用 JSON 方式 制作 了 一 个 收藏 
夹 的 案例 。 在 学 习 了 前 面 HTML 5 本 地 数据 库 的 知识 之 后 ， 可 以 实现 一 个 带 数 据 库 的 收藏 
管理 ， 包 括 查 看 收藏 夹 列 表 ， 以 及 收藏 网 站 的 添加 、 修 改 和 删除 。 具 体 步骤 如 下 。 
国 轨 01| 新 建 一 个 HTML 页 面 。 在 页 面 中 制作 收藏 夹 的 添加 表单 和 结果 显示 表格 ， 
代码 如 下 : 


<form onload="showDialyList()"> 
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<div id="content"> 

<h2> 管 理 收藏 夹 </h2> 

网 站 编号 : <input name="sitename" type="text" id="siteid" /> (不 能 重复 ) 

<br/> 

网 站 名 称 : <input name="sitename" type="text" id="sitename" /> <br/> 

网 站 地 址 : <input name iteurl" type="text" i siteurl™ /> <br/> 

网 站 备注 : <input name="siteurl" type="text" id="sitetext" /> <br/> 

<input name=" 按 钮 " type="button" value=" 保 存 " 
onclick="btnAddDialy()"/> 

<input type="button" id="btnNew" onclick="editDialy('editid')" 
value=" 更 改 " /> <hr/> 

<p id="pstate"></p> 

<div class="text"> 
<table width="100%" cellspacing="1" cellpadding="1" border="0" 

class="mytable"> 


< 
<th> 编 号 </th> 
<th> 网 站 名 称 </th> 
<th> 网 站 URL 地 址 </th><th> 备 注 </th> 
<th> 操 作 详情 </th> 

支 /ET> 

<tbody id="list"></tbody> 

</table> 
</div> 
</div> 
</body> 


上 段 代码 中 ， 页 面 加 载 时 调用 函数 showDialyList0。 该 函数 实现 加 载 全 前 
日 志 列表 的 功能 。 具 体 代码 如 下 所 示 ; 


function showDialyList() 
db = openDatabase ('DialyManage'，,'2.0',' 收 藏 夹 管理 系统 ', 10*1024*1024)， 
if (db) 
{ 
db.transaction (function (tx) { 
tx.executeSql ('select * from siteinfo', [], 
function (tx,rs){ 
Var strHTML = ""; 
if(rs.rows.length>0) 
1 
for (var i=0;i<rs.rows.length;i++) 
{ 
Var intid = rs.rows.item(i) .id; 
strHTML += "<tr>" 
strHTML += "<td>"+intidt+"</td>"; 
strHTML :+ 一 
"<td>"+rs.rows.item(i) .name+"</td>"7 
strHTML +="<td>"+rs.rows.item(i) .url+"</td>"; 
strHTML += 
、 "<td>"+rs.rows.item(i) .memo+"</td>"; 
二 \ strHTML += 
多 < "<td><a href="'javascript:showeditDialy(" 
+intid+") '> 编 辑 </a>gnbsp; gnbsp; gnbsp;"; 


CD 


strHTML += "<a href='javascript:deleteDialy(" 
+intid+") "> 删除 </a></td>"; 
strHTML += "</tr>"; 
} 
}else 
{ 
strBTMDG += 
要 E><t colspan=5><center> 暂 时 没有 记录 。 <VEenEeE></ td><XEE>> 
} 
$ ("list") .innerHTML = strHTML; 
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}, 
function (tx,ex){ $("pstate") .innerHTML = 
"显示 列表 失败 , 失败 原因 是 : "+ex .message; 


这 段 代 码 中 ， 首 先 调用 openDatabase0) 方 法 创建 或 者 打开 了 一 个 数据 库 名 称 是 
“DialyManage”、 版 本 为 2.0 的 10MB 的 数据 库 。 然 后 使 用 transaction() 方 法 执行 事务 ， 
调用 executeSql0 方 法 执行 查询 ， 执 行 的 SQL 语句 为 “select * from siteImnfo”。 执 行 成 功 
后 ， 则 可 以 访问 成 功 回 调 函 数 中 的 rs.rows.length 来 获得 查询 记录 的 总 条 数 ， 根 据 
“rsrows.item(Index 索引 值 ). 字 段 名 ”获得 某 个 字段 的 值 。 同 时 在 页 面 增 加 了 “编辑 ”链接 

和 “删除 ”链接 ， 可 以 实现 编辑 数据 和 删除 数据 的 功能 。 
单 击 “保存 ”按钮 触发 按钮 的 click 事件 ， 调 用 btmAddDialy0) 函 数 实现 浅 
加 收藏 夹 的 功能 。 具 体 代码 如 下 : 


function btnAddDialy () 
{ 
var addid = $('siteid') .value; 
var addname= $('sitename') .value; 
var addurl = $('siteurl') .value; 
var addtext= $('sitetext') .value; 
db = openDatabase ('DialyManage',，,'2.0',' 收 藏 夹 管理 系统 ', 10*1024*1024); 
if (db) 
{ 
var addsql = "insert into siteinfo values(?,?,3?,2)"; 
db.transaction (function (tx) { 
tx.executeSql ('create table if not exists siteinfo( 
id unique,name text,url text,memo text) "') 7 
tx .executeSql (addsql, [addid,addname,addurl,addtext]， 
function (){ $("pstate") .innerHTML = 
"添加 一 条 记录 成 功 ";showDialyList();}， 
function (tx,ex) { $("pstate") .innerHTML = 
"添加 一 条 数据 记录 失败 , 失败 原因 是 : "+ex.message;} 


在 bmAddDialy0 函 数 中 有 两 条 SQL 语句 ， 第 一 条 SQL 语句 的 功能 是 : 如 果 名 为 
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siteInfo 的 表 不 存在 ， 则 创建 siteInfo 表 。 该 表 包 含 4 个 字段 


中 ， 字 段 id 为 主键 ， 不 允许 


EE 复 ; 其 他 3 个 字段 为 字符 型 ， 


: id、name、ur 和 memo。 其 


它们 分 别 表示 网 站 名 称 、 网 站 


地 址 和 备注 。 第 二 条 SQL 语句 的 功能 是 : 实现 向 siteInfo 表 中 添加 记录 的 功能 。 执 行 成 功 


后 ， 则 可 以 访问 成 功 的 


步 台 


回调 函数 ， 重 新 调用 showDialyList0 函 数 加 载 数据 记录 。 


单 击 某 条 记录 的 “编辑 ”链接 ， 实 现 更 改 数据 记录 的 功能 。JavaScript 中 的 


具体 代码 如 下 


所 示 : 


function showeditDialy (id) 


{ 


db = openDatabase ('DialyManage','2.0',' 日 志 管 理 系统 ',10*1024*1024); 


if (db) 
{ 
db.trans 


action (function (tx) { 


tx.executeSql ("select * from siteInfo where id="'"+id+"'",[], 


func 


be 


tiomt(ti; is} 


$('siteid') .value = rs.rows.item(0) .id; 


// 省 略 日 志 输入 框 赋值 


function (tx,ex){ $ ("pstate") .innerHTML = 
"获取 数据 失败 : "+ex.message;} 


) 
1D); 
) 
} 


function editDialy (editid) 


{ 


db = openDatabase ('DialyManage','2.0',' 收 藏 夹 管理 系统 ', 10*1024*1024); 
var editid = $('siteid') .value; 
var editname = $('sitename') .value; 


Var editurl 


= $('siteurl') .value; 


Var edittext=$ ('sitetext') .value; 
= "update siteInfo set name=?,url=?,memo=? where id=?"; 


var editsql 
if (db) 
{ 

db.trans 


action (function (tx) { 


tx .executeSql (editsql, [editname,editur],edittext,editid], 


function (){ showDialyList(); }, 


function (tx,ex){ $("pstate") .innerHTML = 


"更 新 数据 记录 失败 , 失败 原因 是 : "+ex 


.message;} 


showeditDialy0 函 数 首先 根据 收藏 夹 的 id 获得 网 站 的 详细 信息 ， 执 行 的 SQL 语句 为 
“select * from siteInfo where id = 传 入 的 id”， 这 条 SQL 代码 中 没有 使 用 “?” 参 数 ， 而 
是 直接 将 参数 加 到 SQL 语句 后 面 。 页 面 信息 修改 完成 后 ， 单 击 “ 更 改 ” 按 钮 提交 用 户 修改 
记录 ， 执 行 的 SQL 语句 为 “update siteInfo set name=?.url=?.memo=? where id=?”。 执 行 成 


功 后 ， 可 以 访问 成 功 的 
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回调 函数 ， 调 用 函数 showDialyListO 习 


收藏 夹 查 看 、 添 加 和 编辑 功能 实现 以 后 ， 我 们 还 需要 实现 删除 收藏 夹 的 功 


能 。 单 击 某 条 记录 的 “删除 ”链接 删除 某 条 收藏 夹 的 功能 。JavaScript 中 的 具体 
代码 如 下 所 示 : 


function deleteDialy(delid) 
{ 


db = openDatabase ('DialyManage','2.0',' 收 藏 夹 管理 系统 ', 10*1024*1024); 
var delsql = "delete from siteInfo"; 

if(delid!=0) 

| 
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delsql = "delete from siteInfo where id="'"+delid+"'"; 


} 
if (db) 
{ 
db.transaction (function (tx) { 
tx.executeSql (delsql, [], 
function(){ showDialyList ();}, 
function (tx,ex){ $ ("pstate") .innerHTML = 
"删除 数据 记录 失败 , 失败 原因 是 : "+ex.message;} 


上 段 代码 中 根据 传 入 的 delid 参数 判断 是 全 部 清空 还 是 删除 某 条 记录 。 执 行 SQL 语 
删除 成 功 后 可 以 访问 回调 函数 中 的 代码 ， 最 后 调用 showDialyList0 函 数 加 载 记录 。 
目前 为 止 ， 基 于 HTML 5 本 地 数据 库 实现 收藏 夹 管理 的 增 、 删 、 改 、 查 功 
”能 已 经 完成 。 上 面 代码 的 运行 效果 如 图 9-17 所 示 。 


9-17 ”收藏 夹 管 理 


9.5 ” 跨 文档 传输 信息 


为 了 代码 的 安全 性 ， 在 JavaScript 脚本 中 不 允许 跨 域 访问 其 他 页 面 中 的 元 素 ， 这 给 不 
同 页 面 数 据 的 互 访 带 来 了 障碍 。HTML 5 解决 了 这 个 问题 ， 允 许 在 两 个 不 同 的 域名 与 端口 
之 间接 收发 送 数据 的 功能 。 
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首先 ， 需 要 接收 从 其 他 的 窗口 发 送 过 来 的 消息 ， 这 就 必须 对 窗口 对 象 的 message 事件 
进行 监视 。 监视 代 码 如 下 : 


window.addEventListener ("message", function(){}, false); 


postMessage() 方 法 是 HTML 为 了 解决 跨 域 通信 特别 引入 的 一 个 新 的 解决 办 法 ， 目 前 许 
多 主流 的 浏览 器 都 支持 这 一 方法 。postMessage() 方 法 允许 页 面 中 的 多 个 这 ame/window 的 
通信 ，postMessage() 方 法 也 可 以 实现 Ajax 直接 跨 域 ， 而 不 通过 服务 器 端 代理 。 
postMessage() 方 法 向 其 他 窗口 发 送 消 息 ， 定 义 如 下 所 示 : 


otherwindow.postMessage (message, targetOrigin); 


上 述 语 法 中 ，otherwindow 表示 接受 数据 页 面 的 引用 对 象 ， 可 以 通过 window.open() 方 
法 返回 该 对 象 ， 也 可 以 通过 下 标 返 回 window.frames 的 单个 实体 对 象 ， 还 可 以 是 iframe 的 
contentWindow 属性 。 另 外 ，postMessage() 方 法 包含 两 个 参数 ， 具 体 说 明 如 下 。 
@ ”message: 表示 所 发 送 的 消息 文本 ， 可 以 是 JSON 对 象 转换 后 的 字符 内 容 。 
@ targetOrigin: 表示 发 送 数据 的 URL 来 源 ， 可 以 在 URL 地 址 字符 串 中 使 用 通配符 
“*” 指 定 全 部 地 址 。 
【 例 9.9】 
创建 一 个 示例 ， 在 主页 面 输入 一 个 数 ， 将 该 数 传递 到 另 一 个 页 面 进行 处 理 ， 再 到 主页 
面 中 显示 处 理 结果 。 有 具体 步骤 如 下 。 
创建 一 个 HTML 页 面 ， 并 添加 如 下 简单 代码 : 
请 输入 要 删除 的 文章 编号 : 
<input type="text" id="strid" /> 
<input type="button" onclick="test()" value=" 确 定 " /> 
<br/><p id="result"></p> 
<iframe id="framell" src="calc.html" style="width:0px; height:0px;"> 
</iframe> 
在 上 述 代码 中 创建 了 这 ame 框架 ， 并 且 指 向 的 一 个 HTML 页 面 calc.html， 该 页 面 用 于 
完成 具体 的 计算 并 返回 结果 。id 为 result 的 p 元 素 用 于 显示 结果 。 
接 下 来 通过 JavaScript 代码 实现 将 值 传递 给 予 页 面 ， 子 页 面 返回 处 理 后 的 
信息 ， 传 给 本 页 面 。JavaScript 代码 如 下 所 示 : 
<script type="text/javascript"> 
var strOrigin = "http://localhost"; 
window.onload = function () { 
window.addEventListener ("message", function (event) { 


if (event.origin == strOrigin) { 
$ ("result") .innerHTML = event.data; 


1 
else { return; } 
} 
7 false); 
} 
function test() { 
Var str =$ ("strid") .value; 
$ ("framell") .contentWindow.postMessage (str, strOrigin); 


1 
function $(id) {return document .getElementById(id) 7} 
</script> 


国 要 03| 上 述 Javascript 代码 完成 了 获取 值 ， 并 且 将 值 传递 给 子 页 面 ， 在 子 页 面 中 
将 处 理 接收 的 值 并 且 返 回 处 理 后 的 信息 。 子 页 面 cale html 的 代码 如 下 所 示 : 


<script type="text/javascript"> 
Var strOrigin = "http://localhost"; 
window.onload = function () { 
window.addEventListener ("message", function (event) { 
if (event.origin == strOrigin) { 
var strhtm]l = ""; 
var id = event.data; 
if (id > 0 g&& id <= 100) { 
strhtml = "编号 为 "+id+" 的 文章 已 删除 。"; 


. 
else if (event.data > 100) { 
strhtml =“" 找 到 编号 为 "+id+" 的 文章 。"; 
} 
else { 
strhtml = "请 输入 正确 格式 的 编号 。"; 
} 
event.source.postMessage (strhtml, strOrigin); 
. 
} 


, false); 


1 
</script> 


上 述 代 码 的 运行 效果 如 图 9-18 所 示 。 
fs CQ 了 Dlocalhost/Blog6 交 轩 回 岁 国 € 


请 输入 要 师 际 的 文章 编号 : .33 L 请 输入 委员 人 文章 编号 : 1333 


编号 为 33 的 文章 已 删除 。 找 将 号 为 33393 广 章 。 


文章 标题 日 期 文章 标题 
11/15/; 辕 毯 路 相关 的 爱 和 辣 竹 死去 了 B014 -1115/: 


1o1160 107 /4 lo/la/ 


9-18” 跨 域 传输 信息 的 运行 效果 


9.6 多 线程 


在 HIML 5 之 前 ， 浏 览 器 中 的 JavaScript 脚本 代码 都 是 以 单线 程 方式 运行 的 ， 虽 然 有 
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多 种 方式 实现 了 对 多 线程 的 模拟 (如 JavaScript 中 的 内 置 函 数 setImterval0 和 setTimeout() 
等 )， 但 是 ， 本 质 上 ， 程 序 的 运行 仍然 是 由 JavaScript 引擎 以 单线 程 调度 的 方式 进行 的 。 

HTML 5 中 引入 的 多 线程 使 得 浏览 器 端的 JavaScript 引擎 可 以 并 发 地 执行 JavaScript 代 
码 ， 从 而 实现 了 对 浏览 器 端 多 线程 编程 的 良好 支持 。 下 面 将 详细 介绍 如 何 使 用 HTML 5 中 
的 多 线程 。 


(8.6.1 认识 HTML 5 多 线程 


多 线程 是 HTML 5 中 非常 重要 的 一 个 功能 ， 它 解决 先前 版 本 中 脚本 耗费 时 间 长 、 中 断 
执行 的 处 理 及 长 时 间 无 反应 的 情况 。 

HTML 5 为 多 线程 提供 了 Worker 对 象 。 通 过 调用 Worker 对 象 ， 可 以 将 前 台 JavaScript 
代码 分 割 成 若干 代码 块 ， 分 别 交 给 不 同 的 后 台 线 程 处 理 ， 避 免 单 线程 执行 缓慢 的 问题 。 

使 用 HTML 5 多 线程 时 ， 必 须 建 立 一 个 Worker 对 象 ， 并 且 传 入 要 被 调用 的 JavaScript 
文件 的 地 址 ， 而 且 必 须 把 Worker 要 执行 的 操作 写 入 到 这 个 JavaScript 文件 中 。 

1. 创建 Worker 对 象 

创建 Worker 对 象 很 简单 ， 只 需要 把 在 线程 中 执行 的 JavaScript 文件 的 文件 名 传递 给 构 
造 函 数 即 可 。 

例如 ， 下 面 的 代码 创建 了 一 个 Worker 对 象 ， 并 且 传 入 workerjs 文件 : 

Var worker = new Worker ("worker.js"); 

2. 线程 通信 

在 主线 程 与 工作 线程 间 进 行 通信 时 ， 使 用 的 是 线程 对 象 的 postMessage0) 方 法 和 
onmessage 事件 ， 不 管 是 谁 向 谁 发 送 数据 ， 发 送 方 使 用 的 都 是 postMessage0 方 法 ， 接 收 方 
使 用 的 都 是 onmessage 事件 。postMessage( 方 法 有 一 个 参数 ， 即 传递 的 参数 ，onmessage 事 
件 也 只 有 一 个 参数 ， 即 通过 event.data 获取 收 到 的 数据 。 

例如 ，onmessage 事件 的 简单 代码 如 下 : 


worker .onmessage = function (e){ 
alert (e.data); 
} 


3. 发 送 JSON 数 据 


JSON 是 JavaScript 原生 支持 的 内 容 ， 比 较 复 杂 的 数据 就 可 以 使 用 JSON 进行 传递 。 如 
下 面 的 代码 : 


postMessage({'cmd': "init', "timestamp'": Date.now()}); 
4. 处 理 错误 


当 线程 发 生 错误 的 时 候 ， 它 的 onerror 事件 回调 函数 会 被 调用 ， 所 以 处 理 错误 的 方式 
”很 简单 ， 就 是 挂 接线 程 实例 的 onerror 事件 。 这 个 回调 函数 有 一 个 参数 对 象 error， 这 个 对 


象 有 3 个 常用 的 属性 。 
@ message: 错误 消息 。 
e@ filename: 发 生 错 误 的 脚本 文件 。 
@ ”lineno: 发 生 错误 的 行 。 
例如 ，onerror 事件 的 代码 如 下 : 


worker.onerror = function(e){ 
alert ("在 第 ”+ e.lineno + " 行 发 生 错 误 : " + e.message); 
} 


5 销毁 线程 


线程 内 容 可 以 调用 close() 方 法 销毁 自己 的 线程 ， 在 线程 外 部 的 主线 程 中 ， 使 用 线程 实 
例 的 terminate() 方 法 销毁 线程 。 


9.6.2 ”实战 一 一 Worker 对 象 的 简单 应 用 


上 节 已 经 简单 介绍 了 如 何 创 建 和 使 用 Worker 对 象 ， 下 面 主 要 通过 一 个 案例 来 演示 如 
何 使 用 Worker 对 象 处 理 线程 。 

本 案例 中 ， 页 面 加 载 时 创建 一 个 Worker 后 台 线 程 ， 当 输入 内 容 完 成 后 ， 单 击 按钮 向 
后 台 线 程 发 送 输入 内 容 ， 后 台 线 程 将 数据 处 理 完成 后 ， 返 回 前 台 调 用 并 输入 消息 。 实 现 该 
功能 的 具体 步骤 如 下 。 

国 加 01| 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 textarea 元 素 、input 元 素 和 

div 元 素 等 。 其 具体 代码 如 下 : 

内 gnbsp; gnbsp; gnbsp; 容 : 

<label><textarea name="textarea" id="textarea" cols="0" rows="0" 

class="detail content" placeholder=" 请 输入 您 的 评价 内 容 "></textarea></label> 

评论 人 : <label><input type="text" name="cname" id="commentname" cols="0" 

rows="0" /></label> 

<div><a href="javascript:;" onClick="btnSend();" class="button"> 提 交 

</a></div> 

<div id="showSapn"></div> 


国 吕 02| 在 JavaScript 中 首先 判断 浏览 器 是 否 支持 Worker 对 象 ， 如 果 支 持 ， 则 直接 
创建 该 对 象 ， 如 果 不 支 持 则 弹出 提示 。 具 体 代码 如 下 : 


Var objWorker; 
if (typeof (Worker) !=="undefined") 
{ 
objWorker = new Worker ("comments.js"); 
else 
L 
alert ("该 浏览 器 不 支持 Web Worker") 
} 


单 击 “ 提 交 ” 按 钮 时 触发 该 按钮 的 onclick 事件 ， 调 用 bmSend0 函 数 ， 该 


人 
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函数 的 具体 代码 如 下 : 


function btnSend () 

{ 
var content = document .getElementById("textarea") .value;  // 评 论 内 容 
var name = document .getElementById ("commentname") .value;  // 评 论 人 
var con = name + "@" + content; // 组 合 结果 
objWorker .postMessage (con); // 发 送信 息 

上 


上 述 代码 中 ， 首 先 获取 用 户 输入 的 评论 内 容 和 评论 人 ， 然 后 将 它们 组 合 保存 到 变量 
con 中 ， 最 后 调用 objWorker 对 象 的 postMessage() 方 法 发 送 内 容 。 
创建 名 称 为 commentsjjs 的 文件 ， 在 该 文件 中 接收 页 面 传 过 来 的 内 容 。 该 文 


件 中 的 具体 代码 如 下 : 
onmessage = function (event){ 
var datas = event.data; // 获 取 从 页 面 中 传 入 的 数据 
var splits = datas.split('@'); // 以 @ 进 行 拆 分 
Var result = ""; // 声 明 变 量 保存 最 后 的 信息 


result = "[" + splits[0] + "] 的 评论 内 容 是 : " + splits[1]; 
postMessage (result); 
} 
上 述 代 码 首 先 调用 event 对 象 的 data 对 象 获取 从 页 面 中 传 入 的 数据 ， 然 后 调用 splitO 
方法 拆 分 以 @ 为 主 的 内 容 ， 最 后 调用 postMessage() 方 法 将 保存 到 result 变量 中 的 内 容 返 回 


gs 
调用 postMessage0 方 法 时 ， 会 触发 onmessage 事件 ， 在 页 面 中 通过 
本 对 象 的 该 事件 来 获取 信息 并 接收 ， 最 后 将 内 容 显示 到 div 元 素 中 。 其 具 
体 代码 如 下 : 


objWorker.onmessage = function (event) 
{ 

document .getElementById ("showSapn") .innerHTML = event.data; 
} 


运行 本 案例 ， 输 入 内 容 后 单 击 “ 提 交 ” 按 钮 ， 查 看 效果 ， 最 终 运行 效果 如 
图 9-19 所 示 。 


再 不 要 2 省 世 天 妈 丙 职 气 苍天 是 公正 的 更 是 村 B 的 ， 世 天 早 忆 多 划 殉 生 的 一 切 ， 
多 要 地 海 甩 结 了 每 一 个 人 


向 容 : 
写 的 不 棋 吻 > 


: 特 丝 


渍 人 
区 


者 毕 ] 的 请 内 宾 旦 : 写 的 生 寺 计 - 


图 9-19 多 线程 的 运行 效果 


9.7 ”获取 位 置信 息 


HTML 5 中 新 增加 了 Geolocation API 接口 获取 地 理 位 置 ， 它 允许 用 户 在 Web 应 用 程 
序 中 共享 他 们 的 位 置 ， 使 其 能 够 享受 位 置 感知 服务 ， 包 括 了 解 周围 情况 等 。 地 理 位 置信 息 
的 来 源 有 经 度 、 纬 度 和 其 他 特性 ， 获 取 这 些 数据 的 途径 有 GPS、WiFi 和 蜂窝 站 点 等 。 

下 面 详细 介绍 HTML 5 使 用 Geolocation API 接口 获取 地 理 位 置 的 方法 。 


(8.7.1 认识 地 图 API 


HTML 5 为 window.navigator 对 象 增加 了 一 个 geolocation 属性 ， 该 属性 返回 一 个 
Geolocation 对 象 。 调 用 Geolocation 对 象 提供 的 方法 ， 即 可 实现 获取 位 置信 息 。 
因此 ， 在 使 用 之 前 ， 可 以 检测 浏览 器 是 否 支 持 Geolocation 对 象 。 代 码 如 下 : 
function checkDemo(){ 
if (navigator.geolocation){ 
alert ("支持 HTML 5 Geolocation 对 象 。") ; 


}elsef{ 
alert ("不 支持 HTML 5 Geolocation 对 象 。")); 


} 
} 


clearWatch() 方 法 。 
1. getCurrentPosition() 方 法 
getCurrentPosition0) 方 法 可 以 获取 用 户 当前 的 地 理 位 置信 息 ， 该 方法 的 语法 形式 如 下 : 


window.navigator.geolocation.getCurrentPosition (onSuccressCallback, 
onErrorCallback, options); 


上 述 语法 中 getCurrentPosition() 方 法 传 入 了 3 个 参数 ， 第 一 个 参数 用 于 成 功 获取 当前 
地 理 位 置 时 的 回调 函数 ， 该 函数 中 需要 传 入 形 参 对 象 position， 该 对 象 在 下 一 节 进 行 介 
绍 ; 第 二 个 参数 用 于 获取 当前 地 理 位 置 失败 时 的 回调 函数 ;第 三 个 参数 是 一 个 可 选择 的 对 
象 ， 表 示 一 些 属 性 内 容 。 

2. watchCurrentPosition() 方 法 

watchCurrentPosition() 方 法 用 于 持续 获取 用 户 的 当前 地 理 位 置信 息 ， 它 会 定期 地 自动 获 
取 。 该 方法 的 语法 形式 如 下 : 

int watchCurrentPosition (onSuccessCallback, onErrorCallback, options); 

上 述 语 法 中 为 watchCurrentPosition() 方 法 传递 了 3 个 参数 ， 这 3 个 参数 的 使 用 方法 与 
getCurrentPosition0 方 法 中 的 参数 相同 。 该 方法 返回 值 是 一 个 数值 ， 该 数值 可 以 被 
clearWatch() 方 法 使 用 ， 表 示 停 止 对 当前 地 理 位 置信 息 的 监视 。 
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3. clearWath() 方 法 

clearWathO 可 以 停止 对 当前 用 户 的 地 理 位 置信 息 的 监视 。 其 语法 形式 如 下 : 

void clearWath (watchId); 

使 用 该 方法 时 需要 向 该 方法 中 传递 形 参 ， 它 的 值 为 调用 watchCurrentPosition() 方 法 监 
视 地 理 位 置信 息 时 的 返回 参数 。 


9.7.2 “Position 对 象 


无 论 是 Geolocation 对 象 的 getCurrentPosition() 方 法 还 是 watchCurrentPosition() 方 法 ， 
都 需要 传 入 一 个 调用 成 功 后 的 回调 函数 作为 参数 。 该 回调 函数 可 以 使 用 Position 对 象 有 关 
的 属性 来 显示 当前 的 位 置信 息 。 

了 Position 对 象 包含 两 个 重要 属性 : timestamp 和 coords。timestamp 属性 表示 获取 地 理 位 
置 时 的 时 间 ， 而 coords 属性 则 包含 多 个 属性 值 ， 具 体 说 明 如 表 9-7 所 示 。 


表 9-7 coords 属性 所 包含 的 值 


值 名 称 说 明 
accurac: 当前 地 理 位 置 的 精确 度 
latitude 当前 地 理 位 置 的 纬度 
longitude 当前 地 理 位 置 的 经 度 
altitude 当前 地 理 位 置 的 海拔 高 度 
altitudeAccurac: 当前 地 理 位 置 的 海拔 精确 度 ( 单 位 ， 米 ) 
heading 当前 设置 的 前 进 方向 ， 用 面 朝 正 北方 向 的 顺 时 针 旋 转角 度 来 表示 。 无 法 获取 
时 返回 值 为 null 
speed 当前 设置 的 前 进 速度 ， 以 米 / 秒 为 单位 ， 无 法 获取 时 返回 值 为 null 
【 例 9.10】 


下 面 创建 一 个 示例 ， 演 示 如 何 通过 position 对 象 的 相关 属性 获取 用 户 当前 地 理 位 置信 
息 。 实 现 该 功能 的 步骤 如 下 。 
国 轨 01|] 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 span 元 素 ， 该 元 素 显示 详 
细 的 地 理 信息 。 页 面相 关 的 具体 代码 如 下 : 
<span id="ShowMessage"></span> 
国 轨 02|】 页 面 加 载 时 调用 init0 函 数 自动 获取 信息 ， 该 函数 的 具体 代码 如 下 : 


function init() 


{ 


if (navigator.geolocation) // 判 断 浏览 器 是 否 支 持 
{ 
NE navigator.geolocation.getCurrentPosition( 


fA handle getInfo, // 成 功 时 调用 的 函数 
NU 性 handle error, // 失 败 时 调用 的 函数 


N 


多 
{ // 其 他 属性 信息 的 设置 0 
maximumAge:5*1000*60, // 缓 存 有 效 时 间 章 
timeout:5000 // 超 时 时 间 限制 工 
} -| 
三 
) J 
}elsef{ oh 
alert ("浏览 器 不 支持 当前 位 置 的 显示 功能 ") ; 
} 他 
} 新 
window.addEventListener ("load", init,true); // 页 面 加 载 时 调用 init () 事件 


上 述 代码 中 ， 首 先 判断 浏览 器 是 否 支 持 显 示 当 前 位 置 的 功能 ， 如 果 支 持 成 功 时 ， 调 用 
handle getmfo0 函 数 ， 失 败 时 ， 调 用 handle_error0 函 数 且 设置 其 他 属性 的 相关 信息 。 
handle_getmfo0 函 数 成 功 时 才 执 行 ， 在 该 函数 中 传递 一 个 position 对 象 参 
数 ， 然 后 调用 该 对 象 的 相关 属性 显示 详细 内 容 。 其 具体 代码 如 下 : 


function handle getInfo (Position) 


日 


mm。 


Var strHTML 
var objInfo = position.coords; 

strHTML += "当前 位 置 的 纬度 值 : <b>" + objInfo.latitude + "</b><br/>"; 
strHTML += "当前 位 置 的 经 度 值 : <b>" + objInfo.longitude + "</b><br/>"; 
strHTML += "当前 位 置 的 精确 度 : <b>" + objInfo.accuracy + "</b><br/>"; 
strHTML += "当前 位 置 的 前 进 速 度 : <b>" + objInfo.speed + "</b><br/>"; 
strHTML += "当前 位 置 的 前 进 方向 ，<b>" + objInfo.heading + "</b><br/>"; 
strHTML += "当前 位 置 的 时 间 惟 : <b>" + objInfo.timestamp + "</b><br/>"; 
document .getElementById("ShowMessage") .innerHTML = strHTML; 


} 
上 述 代码 中 首先 声明 全 局 变量 sttHTML， 保 存 要 显示 的 内 容 ， 接 着 调用 coords 属性 的 
多 个 属性 值 分 别 显 示 经 度 值 、 纬 度 值 、 精 确 度 及 前 进 速度 和 前 进 方向 等 ， 然 后 直接 调用 
position 对 象 的 timestamp 属性 显示 时 间 惟 ， 最 后 将 变量 的 内 容 显 示 到 id 为 ShowMessage 
的 span 元 素 中 。 
handle_error() 函 数 失 败 时 才 会 执行 ， 在 该 函数 中 传递 一 个 error 对 象 参 数 ， 
然后 根据 code 属性 的 值 判 断 显 示 不 同 的 内 容 。 其 具体 代码 如 下 : 


function handle error (error) 
Switch (error.code){ // 获 取 code 属性 的 值 
case 0: 
alert ("出 现 了 未 知 的 错误 ! ") ; 
break; 
case ds 
alert ("位 置 服务 被 拒绝 ") ; 
break; 
case 2: 
alert ("和 暂时 获取 不 到 位 置信 息 ") ; 
break; 
case 3: 9 《- 
alert (" 获 取信 息 超时 ") ; Sp A 


break; 
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9-20 ”显示 地 理 位 置 的 详细 内 容 


9.8 HTML 5 的 离线 缓存 特性 


随 着 Web 应 用 的 普及 ，Web 离线 应 用 显得 尤为 重要 。 因 为 Web 应 用 程序 要 时 刻 与 服 
务 器 保持 交互 才能 正常 工作 。 一 旦 中 断 Web， 相 关 应 用 也 随 之 停止 。 在 HTML 5 中 提供 了 
一 个 供 本 地 缓存 使 用 的 API， 使 用 这 个 API 可 以 实现 离线 Web 应 用 程序 的 开发 。 

离线 Web 应 用 程序 是 指 当 客户 端 与 Web 应 用 程序 的 服务 器 没有 建立 连接 时 ， 也 能 够 
正常 地 在 客户 端 本 地 使 用 该 Web 应 用 程序 进行 有 关 的 操作 。HTML 5 中 引用 了 离线 应 用 程 
序 缓存 ， 使 得 在 无 网 络 连接 状态 下 运行 应 用 程序 成 为 可 能 ， 有 了 它 Web 应 用 程序 ， 就 可 以 
在 没有 网 络 连接 的 情况 下 运行 。 而 且 还 可 以 指定 HIML 5 应 用 程序 中 具体 哪些 资源 (如 
CSS、JavaScript 和 HTML 等 ) 脱 机 时 可 用 。 

使 用 离线 存储 避免 了 加 载 应 用 程序 时 所 需 的 常规 网 络 请 求 ， 如 果 缓存 清单 文件 是 最 新 
的 ， 浏 览 器 就 不 用 检查 其 他 资源 是 否 为 最 新 了 。 大 部 分 应 用 程序 可 以 从 本 地 应 用 缓存 中 加 
载 完成 ， 另 外 从 缓存 中 加 载 资源 可 节省 带宽 ， 这 对 于 移 除 Web 应 用 是 相当 重要 的 。 

既然 使 用 本 地 缓存 的 API 可 以 实现 离线 Web 应 用 程序 的 开发 ， 那 么 它 和 浏览 器 网 页 
缓存 存在 哪些 区 别 呢 ? 如 下 几 点 列 出 了 比较 明显 的 区 别 。 

(1) 本 地 缓存 是 为 了 整个 Web 应 用 程序 服务 的 ， 而 浏览 器 的 网 页 缓存 是 只 服务 于 单个 
网 页 的 。 

(2) 本 地 缓存 只 缓存 那些 指定 需要 缓存 的 网 页 ， 任 何 网 页 都 具有 网 页 缓存 。 

(3) 本 地 缓存 是 可 靠 的 ， 开 发 人 员 可 以 控制 对 哪些 内 容 进 行 缓存 ， 哪 些 内 容 不 进行 组 
存 ;网 页 缓存 是 不 安全 、 不 可 靠 的 。 

(4) 开发 人 员 可 以 通过 编程 的 方法 来 控制 缓存 的 更 新 ， 利 用 缓存 对 象 的 各 种 属性 、 状 
态 和 事件 等 开发 强大 的 离线 应 用 程序 。 

创建 一 个 HTML 5 的 离线 缓存 应 用 是 非常 简单 的 ， 以 下 是 快速 创建 离线 应 用 程序 缓存 
的 步骤 。 
创建 一 个 有 效 的 HTML 5 文件 。 


~ 


HTML 5 中 直接 使 用 DOCType 创建 index.html 页 面 文件 比 HTML 4 中 使 用 XHTML 
创建 文件 时 更 加 易于 识 记 。 

步骤 [| 新 增加 对 .htaccess 的 支持 。 

一 个 manifest 文件 需要 被 正确 的 MIME-TYPE 支持 ， 这 种 文件 类 型 为 “text/cache- 
manifest”， 必 须 在 服务 器 中 进行 配置 。 假 设 所 使 用 的 服务 器 是 Apache， 那 么 在 创建 文件 
之 前 ， 需 要 向 .htaccess 文件 中 新 增加 一 个 指令 。 

打开 该 .htaccess 文件 ， 该 文件 部 署 在 网 站 的 根 目录 下 ， 新 增 以 下 代码 : 


AddType text/cache-manifest .manifest 


创建 .manifest 文件 。 
将 manifest 文件 链接 到 HTML 文档 中 。 

为 了 启动 应 用 缓存 ， 因 此 需要 在 网 页 的 <html></html> 标 记 中 添加 manifest 属性 ， 将 该 
属性 的 值 指定 为 .manifest 文件 。 

国 归 05 | 在 多 个 浏览 器 中 进行 测试 。 


详 若 毕 祝 并 号 9 1WLH 媳 6 洪 忆 


贱 注意 ， 将 网 页 设置 manifest 属性 后 ， 当 用 户 访问 每 一 个 包含 该 属性 的 页 面 时 ， 都 
会 被 缓存 。 如 果 manifest 属性 没有 被 指定 ， 则 不 会 缓存 (除非 网 页 被 直接 在 manifest 文件 
中 指定 )。 


【 例 9.11】 
本 节 练 习 非 常 简单 ， 在 网 页 中 显示 3 张 不 同 的 图 片 ， 并 且 在 缓存 清单 中 离线 缓存 两 张 
图 片 ， 步 又 如 下 所 示 。 
创建 一 个 新 的 页 面 ， 在 页 面 中 添加 3 张 图 片 ， 其 中 前 两 张 图 片 来 自 网 络 ， 
最 后 一 张 图 片 来 自 本 项 目的 image 文件 夹 。 代 码 如 下 : 
<img src="http://www.baidu.com/img/bdlogo.gif" title=" 百 度 " height= "60" 


/> <img src="http://www.itzcn.com/images/1ogo.gif" title=" 窗 内 网 " 
height="60"/> <img src="images/google.png" title=" 谷 歌 " height="60" /> 


创建 全 称 是 base manifest 的 缓存 清单 文件 ， 并 且 在 该 文件 中 定义 要 缓存 的 
内 容 。 基 本 文件 内 容 如 下 : 
CACHE MANIFEST 


#version 5.2.0 


CACHE: 
http://www.baidu.com/img/bdlogo.gif 
images/google.png 


国 轨 03] 将 上 一 步 中 创建 的 base manifest 文件 链接 到 HTML 网 页 中 ， 在 网 页 中 的 
<html></html> 标 记 中 添加 manifest 属性 ， 将 此 属性 指定 为 base manifest 文件 : 

<html manifest="base.manifest"> 

力 玫 0o4| 在 HS 中 访问 页 面 进行 测试 ， 大 多 数 浏览 器 都 不 会 提醒 是 否 允 许 缓存 ， 而 
是 默认 自动 缓 在。 如 图 9-21 所 示 为 Chrome 浏览 器 的 效果 。 
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国 加 05| 以 手动 的 方式 断 开 网 络 连接 ， 然 后 重新 访问 该 页 面 查看 效果 ， 离 线 效果 如 
图 9-22 所 示 。 


人 多 天地 计时 给 了 条 一个 
名表 地 渍 加 结 了 笃 _ 个 人 。 而 疝 
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图 9-21 Chrome 浏 览 器 连接 网 络 访问 图 片 ” 图 9-22 Chrome 浏 览 器 离线 访问 缓存 的 图 片 


9.9 本 章 

1. 填空 题 

(1) 使 用 file 对 象 的 属性 可 以 获取 不 带路 径 的 文件 名 称 。 

(2) 使 用 代码 可 以 判断 当前 浏览 器 是 否 支持 FileReader 接口 。 

(3) 在 FileReader 接口 中 方法 负责 读 取 文 本 文件 。 

(4) 使 用 sessionStorage 对 象 读 取 数 据 需 要 使 用 方法 。 

(5) 当 用 户 关闭 浏览 器 窗口 后 ， 数 据 不 会 被 保存 指 的 是 对 象 。 

(6) dataTransfer 对 象 的 方法 可 以 为 元 素 添加 指定 的 数据 。 

(7) HTML 5 中 可 以 在 页 面 调用 方法 解决 跨 域 通信 的 问题 。 

(8) 调用 Geolocation 对 象 的 方法 能 够 实时 地 获取 或 者 检测 用 户 的 地 理 位 置 
信息 。 

(9) 文件 也 叫 清单 文件 ， 它 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 缓 
存 的 资源 文件 的 名 称 。 

2. 选择 题 


(1) 下 列 关 于 FileReader 接口 中 事件 的 描述 ， 不 正确 的 是 

A.， 总 是 先 执行 onloadstart 事件 ， 再 执行 onloadend 事件 

B. 如 果 执 行 了 onerror 事件 ， 将 不 会 执行 onloadend 事件 

C. 只 有 在 onload 事件 中 能 获取 内 容 

D. 在 onload 事件 和 onloadend 事件 中 都 可 以 获取 内 容 
(2) 调用 abort() 方 法 将 触发 FileReader 接口 的 事件 。 

A. abort B. onabort C. onerror D. onend 
(3) 拖 放 元 素 将 源 文 件 拖 放 到 目标 文件 上 时 触发 的 事件 是 

A. dragend B. dragover C. dragenter D. drop 


DN 


(4) HTML 5 中 接受 服务 器 端 发 送 来 的 数据 时 触发 的 事件 是 . 加 
A. onopne B.， onerror 事件 C.，onmessage 事件 D.， mark 元 素 站 
(5) 后 台 线 程 调 用 postMessage() 方 法 发 送 数 据 后 ， 前 台 页 面 会 触发 message 事件 ， 并 3 
且 在 该 事件 中 获取 处 理 后 的 数据 。 下段 代 码 空 白 处 应 该 填写 
worker .addEventListener ("message",function (event){ 
var content = 7 ”// 后 台 处 理 完成 后 返回 到 前 台 的 数据 他 
},false) 新 
特 
A. e.message B. event.message C. event.data D. e.data 性 
(6) 如 果 想 使 用 sessionStorage 对 象 写 入 键 名 为 name， 值 为 “ 陈 虎 ”的 数据 ， 下 面 
的 写法 是 正确 的 。 
A. sessionStorage.setItem(“name”,“ 陈 虎 ”) 
B.， localStorage.setItem(“name”，“ 陈 虎 ”) 
CsessionStorage.getItem(“ 陈 虎 ”) 
D.， sessionStorage.setItem(“ 陈 虎 ”, name) 
(7) 方法 不 属于 navigator.geolocation 对 象 。 
A. clearWatch() B. getCurrentPosition() 
C. watchCurrentPosition() D. postMessage() 
(8) Position 对 象 的 coords 属性 的 值 有 多 个 ， 通 过 可 以 获取 当前 位 置 
的 经 度 。 
A. accuracy B. latitude C. longitude D. altitude 


3. 上 机 练习 

(1) 处 理 文件 读 取 时 的 错误 

根据 本 章 9.1 节 学 习 的 知识 ， 制 作 一 个 读 取 文 件 内 容 的 案例 。 要 求 在 读 取 时 会 对 读 取 
事件 进行 监听 ， 并 处 理 读 取 异 常 时 的 错误 ， 最 后 显示 到 页 面 上 。 

如 图 9-23 所 示 为 先 选择 一 个 .txt 文件 ， 再 修改 该 文件 的 名 称 ， 然 后 单 击 “ 上 传 ”按钮 
之 后 的 错误 处 理 效果 。 
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9-23 ”错误 处 理 效果 


(2) 日 志 管 理 a 
根据 本 章 9.4 节 学 习 的 知识 制作 一 个 基于 HIML 5 数据 库 的 日 期 管理 功能 。 要 求 具有 
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添加 日 志 、 编 辑 日 志 、 删 除 日 志和 清空 日 志 的 功能 。 示 例 的 参考 运行 效果 如 图 9-24 所 示 。 


条 人 本 是 月 :本 也 县 是 明天 ， 爷 各 关 避 的 由 未 吗 ? 


Ben | CR , FEES) 
Bs 人 


LTRTITET 
本 关 ， 休 如 这 记 的 向 间 大 T 


9-24 日 志 管理 效果 


(3) 多 线程 计算 器 

根据 本 章 9.6 节 学 习 的 知识 ， 制 作 一 个 多 线程 的 计算 器 。 要求 用 户 可 以 在 页 面 输入 要 
计算 的 两 个 操作 数 ， 然 后 选择 要 执行 的 操作 ， 最 后 显示 计算 结果 ， 同 时 可 以 进行 停止 以 及 
清空 等 操作 。 示 例 的 参考 运行 效果 如 图 9-25 所 示 。 
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Result 
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20+20=40 
20*20=400 
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CSS 3 快速 入 门 


CSS(Cascading Style 层 司 样式 表 ) 在 网 页 制作 中 经 常会 被 使 用 到 ， 它 
与 HTML 和 JavaScript 结合 ， 能 够 制作 出 绚丽 夺目 的 网 页 。 使 用 CSS 只 要 对 相 
应 的 代码 做 出 简单 修改 ， 四 支 同 一 页 面 的 不 同 部 分 ， 或 者 页 数 不 同 的 网 页 
的 外 观 和 格式 。CSS 3 是 CSS 技术 的 升级 版 本 ，CSS 3 语言 开发 是 朝 着 模块 化 发 
展 的 。 与 先前 的 版 本 相 比 ，CSS 3 增加 了 许多 新 的 功能 ， 也 在 原来 的 基础 上 对 某 
些 贞 pe 了 修改 。 

章 何 读 震 四 绍 GSS_3_ 的 基础 知识 ai 通 si 直 末 章 的 学 习 ， 读 者 不 仅 可 以 了 解 
CSS 3 sme 点 还 本 以 全 CSS 3 中 新 增 的 颜色 ， 也 能 够 对 CSS 3 中 的 
新 增 属 性 有 会 定 的 认识 。 
本 章 学 习 目标 : 

了 解 CSS 3 的 发 展 历史 
了 解 CSS 3 的 优 缺点 
熟悉 浏览 器 对 CSS 3 的 支持 情况 
掌握 HSL 和 HSLA 的 使 用 
掌握 RGBA 和 Opacity 的 使 用 
熟悉 CSS 3 中 新 增加 的 选择 器 
了 解 CSS 3 中 新 增 的 多 种 属性 
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10.1 了 解 CSS 3 


CSS 3 是 CSS 的 升级 版 本 ， 也 是 对 CSS 2 的 扩展 ， 它 增加 和 修改 了 许多 新 的 功能 。 下 
面 简单 了 解 CSS 3 的 基础 知识 ， 包 括 它 的 发 展 、 优 缺点 和 浏览 器 的 支持 情况 。 


(0 CSS 3 发 展 概述 


在 20 世纪 90 年 代 初 ，HTML 语言 诞生 ， 各 种 形式 的 样式 表 也 开始 出 现 。 各 种 不 同 的 
浏览 器 结合 自身 的 显示 特性 ， 开 发 了 不 同 的 样式 语言 ， 以 便于 读者 自己 调整 网 页 的 显示 效 
果 ， 这 时 的 样式 语言 仅 供 读者 使 用 ， 而 不 是 供 设计 者 使 用 。 随 着 HTML 的 发 展 ，1994 年 
初 ， 哈 坤 。 利 提出 了 CSS 的 最 初 想 法 ， 伯 特 。 波 斯 当时 正在 设计 Argo 浏览 器 ， 他 们 决定 
共同 开发 CSS。 

1994 年 年 底 ， 哈 坤 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 他 们 对 CSS 的 构想 。 在 1995 
年 底 ，CSS 语言 正式 完成 ， 同 年 12 月 发 布 了 第 一 个 版 本 。1998 年 5 月 ，CSS 2 正式 发 
布 。 之 后 ，W3C 完成 了 CSS 3 的 工作 草案 ,在 2001 年 5 月 23 日 发 布 CSS 3， 这 是 目前 
CSS 的 最 新 版 本 。 发 展 历程 如 下 : 

@ 2002 年 5 月 15 日 发 布 CSS 3 中 规范 文本 行 模型 的 line 模块 ， 同 年 ， 还 发 布 了 有 具 

有 列表 样式 和 新 增 边 框 功能 的 Lists 模块 和 Border 模块 。 

@ ”2003 年 依次 发 布 了 定义 CSS 3 生成 及 更 换 内 容 的 Generated and Replaced Content 
模块 ， 同 年 ， 还 发 布 Syntax 模块 和 Hyperlink Presentation 模块 ， 它 们 分 别 表 示 演 
示 效 果 与 新 定义 的 CSS 语法 规则 。 

@ 2004 年 2 月 发 布 CSS 3 Hyperlink Presentation 模块 ， 该 模块 定义 了 超 链接 表示 规 
则 ， 同 年 12 月 发 布 了 CSS 3 Speech 模块 ， 该 模块 定义 了 语音 样式 规则 。 

@ 2005 年 12 月 15 日 发 布 Cascading and Inheritance 模块 ， 它 重新 定义 了 CSS 层 合 
和 继承 规则 。 

@ ”2007 年 先后 发 布 Basic Box 模块 和 Grid Positioning 模块 ， 它 们 分 别 用 于 定义 CSS 
基本 盒 模型 与 CSS 网 格 定位 规则 。 

@ ”2009 年 新 定义 了 许多 新 的 模块 ， 包 括 Animations( 动 画 模型 )、3D Transforms(3D 
转换 )、Fonts( 字 体 )、Image Value( 图 像 内 容 显 示 )、Flexible Box Layout( 灵 活 的 框 
布局 )、 视 图 、Transitions( 动 画 过 渡 ) 以 及 2D Transforms(2D 转换 ) 等 。 

@ 2010 年 4 月 发 布 Template Layout( 模 板 布局 ) 和 Generated Content For Page Media 
(分 页 媒体 内 容 ) 两 个 模块 ， 同 年 10 月 又 发 布 了 Text( 文 本 ) 和 Background and 
Borders( 边 框 和 背景 ) 两 处 模块 。 


10.1.2 CSS 3 的 优 缺 点 


CSS 3 已 经 完成 了 多 个 模块 的 开发 ， 它 给 设计 者 和 开发 者 带 来 了 全 新 的 体验 。CSS 3 
”将 完全 向 后 兼容 ， 因 此 ， 没 有 必要 修改 现在 的 设计 来 让 它们 继续 运作 ， 网 络 浏览 器 也 将 继 


续 支 持 CSS 2。CSS 3 主要 的 影响 是 可 以 使 用 新 的 可 用 的 选择 器 和 属性 ， 这 些 选 择 器 和 属 
性 允许 开发 者 实现 新 的 设计 效果 (例如 渐变 和 动画 )， 而 且 还 可 以 使 用 更 加 简单 的 方式 实现 
已 有 的 效果 (例如 背景 和 分 栏 )。 

已 经 有 学 者 预言 “CSS 3 和 HTML 5 将 改变 未 来 的 Web 世界 ”。 广 大 开发 者 已 经 通过 
实践 证 明了 CSS 3 和 HTML 5 的 强大 。 虽 然 目前 CSS 3 和 HTML 5 还 没有 完全 普及 ， 浏 览 
器 的 支持 也 在 初级 实验 阶段 ， 但 是 这 正 是 需要 读者 积极 去 学 习 和 实践 的 时 候 ， 只 有 这 样 才 
不 会 落伍 ， 才 不 会 被 淘汰 。 

CSS 3 在 为 开发 者 带 有 全 新 体验 的 同时 ， 还 存在 着 一 些 负面 影响 。 开 发 者 在 使 用 时 应 
该 扬长 避 短 ， 这 样 才 能 更 好 地 理解 和 学 习 CSS 3。 

(1) 落伍 的 正 浏览 器 

CSS 3 新 增 的 许多 功能 在 正 浏览 器 中 无 法 看 到 效果 ， 但 是 随 着 正 浏览 器 新 版 本 的 发 
布 ， 它 对 CSS 3 和 HTML 5 的 支持 功能 也 在 增加 。 出 于 安全 性 考虑 ， 应 该 尽量 避免 将 这 些 
新 功能 用 于 重要 的 设计 中 ， 同 时 也 应 该 保证 ， 当 这 些 效果 不 起 作用 时 有 替代 的 解决 方案 。 

(2) 验证 问题 和 代码 元 余 

目前 的 CSS 3 规范 并 不 是 最 终 版 本 ， 不 同 的 浏览 器 都 在 使 用 各 自 的 私有 属性 实现 新 功 
能 ， 这 可 能 会 为 CSS 验证 埋 下 隐患 。 同 时 ， 这 还 使 CSS 代码 显得 十 分 元 余 。 

(3) 反面 效果 

设计 页 面 时 并 不 是 一 定 要 使 用 CSS 3 的 新 增 属性 ， 不 恰当 的 使 用 可 能 会 带 来 一 些 反 面 
效果 ， 阴 影 效果 就 是 一 个 例子 。 


OK 浏览 器 支持 情况 


CSS 3 为 广大 Web 开发 者 带 来 了 全 新 的 体验 ， 但 是 并 非 所 有 的 浏览 器 都 提供 对 它 的 支 
持 。 各 个 主流 的 浏览 器 都 定义 了 各 自 的 私有 属性 ， 以 便 用 户 体验 CSS 3 的 新 特性 。 浏 览 器 
这 种 定义 自己 的 私有 属性 的 方法 可 以 避免 不 同 的 浏览 器 在 解析 相同 属性 时 出 现 冲 突 ， 但 是 
也 为 开发 者 带 来 了 麻烦 ， 因 为 Web 开发 者 不 仅 需要 使 用 更 多 的 CSS 样式 代码 ， 而 且 还 非 
常 容 易 导 致 同一 个 页 面 在 不 同 的 浏览 器 之 间 表 现 不 一 致 。 
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二 味 ， 网 页 不 需要 在 所 有 浏览 器 中 看 起 来 都 严格 一 致 ， 有 时 候 在 某 个 浏览 器 中 使 
用 私有 属性 实现 特定 的 效果 也 是 可 行 的 。 

不 同 浏览 器 的 内 核 有 所 不 同 ， 这 导致 浏览 器 定义 的 私有 属性 也 有 不 同 。WebKit 类 型 的 
浏览 器 (例如 Chrome) 的 私有 属性 是 以 -webkit- 为 前 级 的 ，Gecko 类 型 的 浏览 器 (例如 Firefox) 
的 私有 属性 是 以 -moz- 为 前 级 的 ，Opera 浏览 器 的 私有 属性 是 以 -0- 为 前 级 的 ， 而 正 浏览 
的 私有 属性 是 以 -ms- 为 前 级 的 。 

在 Windows 系统 下 ， 各 主流 浏览 器 对 CSS 3 各 个 模块 的 支持 情况 有 所 不 同 。Web 开 
发 者 可 以 通过 多 个 工具 进行 测试 ， 下 面 介绍 常用 的 两 个 。 

1l. Canluse 


Can I use 的 功能 非常 强大 ， 它 不 仅 可 以 检测 浏览 器 对 CSS 3 的 支持 情况 ， 也 能 检测 
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HTML 5 和 SVG 等 其 他 内 容 。Can Iuse 的 网 址 是 http://www.caniuse.com， 页 面 打 开 效 果 如 
图 10-1 所 示 。 
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Can I use... Suoosisons Biseg YW Istter 
Comparibility tables for support of HTMLS, CSS3, SVG and more in desktop and 
mobile browsers 


10-1 Can 1 use 网 页 


开发 者 可 以 单 击 图 10-1 中 的 链接 查看 浏览 器 的 支持 情况 ， 也 可 以 在 网 页 的 搜索 区 域 输 
入 属性 或 者 元 素 等 内 容 进行 搜索 。 例 如 ， 图 10-2 显示 了 各 个 浏览 器 对 Border-radius 属性 的 
支持 情况 。 


图 10-2 各 个 浏览 器 对 Border-radius 属 性 的 支持 情况 


从 图 10-2 中 可 以 看 出 ， 该 图 显示 了 了 正 、Firefox、Chrome、Safari 和 Opera 等 多 个 浏览 
器 对 Border-radius 属性 的 支持 情况 。 其 中 ， 红 色 区 域 表 示 当 前 浏览 器 的 版 本 不 支持 此 属 
性 ， 浅 绿色 区 域 表示 对 此 属性 支持 ， 深 绿色 区 域 表示 部 分 支持 ， 灰 色 区 域 表示 未 知 。 另 
外 ， 浏 览 器 在 使 用 时 可 能 需要 添加 私有 属性 ， 例 如 -webkit-。 


2. findmebyIP 

findmebyIP 是 一 个 简单 实用 的 在 线 应 用 ， 帮 助 开发 者 检测 使 用 的 浏览 器 版 本 是 否 支 持 
CSS 3 和 HTML 5， 支 持 哪些 属性 。findmebyIP 的 网 址 是 http://fmbip.com/litmus/， 打 开 效 
果 如 图 10-3 所 示 。 图 10-3 中 ， 针对 MAC 和 Windows 两 个 操作 系统 的 Chrome、Firefox、 
Opera、Safari 和 正 浏览 器 进行 了 比较 。 
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10.2 CSS 3 的 新 增 颜色 


CSS 3 相 比 先前 的 CSS 2 有 许多 不 同 ， 模 块 化 细 分 的 同时 也 新 增 了 功能 。 例 如 ， 开 发 
者 可 以 使 用 RGB、 十 六 进 制 或 者 英文 颜色 名 称 (例如 Black 代表 黑色 ) 设 置 背景 。CSS 3 中 
定义 了 一 些 新 的 属性 ， 设 置 这 些 属性 还 可 以 控制 色调 、 饱 和 度 、 亮 度 和 透明 度 等 信息 。 

本 节 介绍 CSS 3 中 新 增 的 与 颜色 有 关 的 属性 ， 包 括 HSL、HSLA、RGBA 和 Opacity 
四 个 属性 。 


(02. 1 HSL 属 性 


HSL 色彩 模式 是 业界 的 一 种 颜色 标准 ， 它 是 通过 对 色调 、 饱 和 度 、 亮 度 三 个 颜色 通道 
的 变化 以 及 它们 相互 之 间 的 倒 加 来 得 到 各 式 各 样 的 颜色 的 。HSL 即 是 代表 色调 、 饱 和 度 和 
亮度 三 个 通道 的 颜色 ， 这 个 标准 几乎 包括 了 人 类 视力 所 能 感知 的 所 有 颜色 ， 是 目前 运用 最 

sa 
@ 色调: 即 Hue，0 或 者 360 表示 红色 ，120 表示 绿色 ，240 表示 蓝 色 ， 开 发 者 也 可 
RE 颜色 。 

@ 饱和 度 : 即 Saturation， 值 在 0%~100% 之 间 。0% 意 味 着 灰色 ， 而 100% 是 全 彩 

@ 亮度: 即 Lightmess， 它 也 是 一 个 百分比 值 ， 在 0%~100% 之 间 。 0% 表 示 黑 色 ， 
100% 表 示 白 色 。 


全 rm 5 与 CSS 3 网 页 设计 入 门 与 提高 


【 例 10.1】 
在 本 次 示例 中 ， 用 户 可 以 拖 动 页 面 中 的 滑 块 动态 改变 <div> 标 记 的 背景 颜色 。 实 现 步 骤 


如 下 。 


国 吕 01| 向 页 面 中 添加 hl 元 素 ， 该 元 素 表示 文章 的 标题 ， 接 着 添加 一 个 div 元 素 ， 
该 元 素 中 包含 多 个 p 元 素 ， 每 一 个 p 元 素 显示 一 段 内 容 。 部 分 代码 如 下 : 

<h1> 把 不 喜欢 自己 的 人 忘掉 </h1> 

<div id="MySet"> 
<p>&gnbsp; gnbsp; gnbsp; gnbsp; 这 个 世界 ， 总 有 你 不 喜欢 的 人 ， 也 总 有 人 不 喜欢 你 。 这 都 

很 正常 。 而 且 ， 无 论 你 有 多 好 ， 也 无 论 对 方 有 多 好 ， 都 苛求 彼此 不 得 。 因 为 ， 好 不 好 是 一 回 事 ， 喜 

欢 不 喜欢 是 另 一 回 事 。</p> 
<!-- 省 略 其 他 内 容 --> 

</div> 

向 页 面 中 添加 3 个 滑 块 ， 这 3 个 滑 块 分 别 表示 吾 、S、 工 的 值 。 滑 块 通过 
input 元 素 实 现 ， 将 type 属性 值 设 置 为 range 即 可 。 另 外 ， 还 需要 为 这 些 input 元 
素 添 加 onChange 事件 属性 。 代 码 如 下 : 

H: <input id="hcolor" type="range" onChange="ChangeColor () " min="0" 


max="360" step="1"/> 


S: <input id="scolor" type="range" min="0" max="100" step="1" 
onChange="ChangeColor () "/> 


L: <input id="lcolor" type="range" min="0" max="100" step="1" value="40" 
onChange="ChangeColor()" /> 


继续 向 页 面 中 添加 span 元 素 ， 并 为 该 元 素 指定 id 属性 ，span 元 素 用 于 显 
示 HSL 的 各 个 取 值 。 代 码 如 下 : 
<span id="showvalue"></span> 
因 04 | 创建 ChangeColor0 函 数 ， 在 该 函数 中 分 别 获取 H、S、L 滑 块 的 值 ， 然 后 
再 更 改 span 元 素 的 文本 和 div 元 素 的 背景 颜色 。 函 数 代码 如 下 : 
function ChangeColor(){ 
Var h document .getElementById ("hcolor") .value; 


Var s document .getElementById("scolor") .value; 
var 1 document .getElementById ("lcolor") .value; 


War pln = hi ta // 将 获取 到 的 值 拼接 起 来 
var value = document .getElementById("showvalue"); // 获 取 span 对 象 
value.innerHTML = "hsl("+pin+") "7 // 设 置 要 显示 的 值 
var set = document .getElementById ("MySet"); // 获 取 div 对 象 
set.style.backgroundColor = "hsl ("+pin+")"; // 指 定 背 景 颜色 

} 


RH05] 页 而 加载 时 调用 ChangeColor0 函 数 更 改 文章 内 容 的 背景 颜色 。 代 码 如 下 : 
window.onload = ChangeColor; 


国 轨 06 | 在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 网 页 的 初始 效果 如 图 10-4 所 示 。 
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把 不 喜欢 自己 的 人 忘掉 
渤 个 从 界 ， 尼 有 你 不 于 欢 的 人 ， 人 也 民 而 人 不 豆 允 你。 法 乔 各 工党 ， 油 上 内， 区 挫 祭 有 各 
， 包 关 证 对方 有 当权 ， 乔 并 求 统 式 不 但。 较为 ， 生 不 入 归 一 四 事 。 意 区 不 音 区 着 另 一 四 
训 


刘 写 埋 计 人 喜 下， 折扣 的 ， 只 稻 和 自我 的 村 产 。 不 要 用 无数 次 的 摧 箱 ， 雪 的 得 一 个 六 牛 


也 届 。 条 可 降 费 执 来 的 ， 只 会 是 对 方 直 肥 地 质 商 临 下 和 颗 措 气 陀 。 沈 有 平 禹 ， 拆 表 天 对 


二 > 洲 党 8SSO 岂 0 江 网 


人 也 不 要 在 意 政 不 齐 政 上 ， 方 出 稍 人 和 还 人 未 。 名 符 傅 闪 民 出 的 眼 区 ， 准 交合 取 入 裕 纺 
人 隐 ， 人 耻 下 息 讽 它 十 环 福 。 列 多 是 要 六 人 了 的， 过 天 多 隐 天 统 和 便 申 ， 也 就 元 从， 在 町 狼 惠 
人 给 网 朵 ”这 桂香 到 和 我 的 沪 汉 各 不 史 . 
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图 10-4 初始 效果 
随意 拖 动 图 10-4 中 的 滑 块 ， 改 变 文 章 内 容 的 背景 颜色 ， 此 时 效果 如 图 10-5 
所 示 。 
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(10.2.2 HSLA 属 性 


HSLA 是 在 HSL 的 基础 上 增加 一 个 透明 度 的 设置 ， 它 是 HSL 颜色 值 的 扩展 ， 带 有 一 
个 alpha 通道 ， 规 定 了 对 象 的 不 透明 度 。HSLA 的 使 用 语法 如 下 : 


hsla(hue, saturation, lightness, alpha) 


在 上 述 语法 中 ，alpha 参数 定义 不 透明 度 ， 它 的 值 是 在 0~1 之 间 的 浮 点 数值 。 其 中 ，0 
表示 完全 透明 ，1 表示 完全 不 透明 。 

【 例 10.2】 

在 例 10.1 的 基础 上 进行 更 改 ， 向 用 户 提供 一 个 动态 改变 背景 色 的 滑 块 ， 拖 动 时 能 够 动 
态 更 改 文章 内 容 背景 颜色 的 透明 度 。 实 现 步骤 如 下 。 

区 弹 01| 向 网 页 中 增加 一 个 range 类 型 的 input 元 素 。 代 码 如 下 : 


A: <input id="acolor" type="range" min="0" max="1" step="0.1" Value="0.5" 
onChange="ChangeColor ()" /> 
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国 加 02| 向 Javascript 脚本 的 ChangeColor0 函 数 中 添加 代码 ， 获 取 用 户 拖 动 滑 块 时 
透明 度 的 值 ， 并 且 将 其 添加 到 指定 的 变量 中 。 部 分 代码 如 下 ; 


function ChangeColor (){ 
/* 省 略 其 他 代码 */ 


var a = document .getElementById("acolor") .value; 


Var pin 


= ht", "+S+n 和 名 "十 1 十 "多 "+as 


// 将 获取 到 的 值 拼接 起 来 


var value = document .getElementById("showvalue"); // 获 取 span 对 象 


value.innerHTML = "hsla("+pin+") "7 
= document .getElementById ("MySet"); // 获 取 div 对 象 
// 指 定 背景 颜色 


Var set 


set.style.backgroundColor = "hsla("+pin+") "7 


} 


window.onload = ChangeColor; 


在 浏览 器 中 运行 本 示例 的 代码 查看 效果 ， 透 明度 为 0.5 时 的 效果 如 图 10-6 


所 示 。 


国 归 04| 随意 拖 动 图 10-6 中 的 滑 块 更 改 透明 度 和 色调 、 饱 和 度 以 及 亮 


时 效果 如 
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10-6 透明 度 为 0.5 时 的 效果 


图 10-7 所 示 。 
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把 不 喜欢 自己 的 人 忘掉 
各 有 你 不 启 欢 的 人 ， 也 坊 有 人 不 豆 欢 你 。 这 者 很 工 傅 。 商 且 ， 关 论 你 池 季 


方 有 季 好 ， 都 首 求 镇 多 不 得 。 国 为 ， 好 不 寻 症 -一 回 融 ， 喜 吹 不 守 吹 是 马 一 加 


到 意 堆 讨 人 专 欢 ， 新 损 的 ， 只 能 基 问 种 的 本 严 。 不 要 用 无 数 次 的 白 障 ， 夺 独得 一 个 浊 器 
区 调 。 和 好 本 障 贵 接 未 的 ， 只 含 是 对 方 寅 发 地 居高临下 和 师 措 气 便 。 没 有 平视 ， 就 汰 式 对 


也 不 要 衣 宫 次 不 癌 次 上 ， 分 出 好 人 和 坏人 来。 需 着 情 综 借 问 的 根 光 ， 礁 免 全 了 入 裕 禾 
人 的 ， 你 不 能 襄 它 是 坯 狗 。 狗 总 中 要 多 人 的 ， 时 是 狗 的 天 性 和 便 合 。 也 就 是 说， 在 叮 着 别 


人 的 同时 ， 二 要 乔 虽 自 性 的 秧 隐 和 不 中 


10-7 ”透明度 为 1 时 的 效果 


// 设 置 要 显示 的 值 


音 稚 
度 等 


内 容 ， 此 


从 图 10-7 中 可 以 看 出 ， 当 前 的 色调 值 是 273， 饱 和 度 值 是 33%， 亮 度 值 是 13%， 透 明 
度 值 是 1。 


(02.3 RGBA 属 性 


RGB 色彩 模式 (也 翻译 为 “ 红 绿 蓝 ”， 比 较 少 用 ) 是 业界 的 一 种 颜色 标准 ， 是 通过 对 红 
(Red)、 绿 (Green)、 蓝 (Blue) 三 个 颜色 通道 的 变化 以 及 它们 相互 之 间 的 个 加 来 得 到 各 式 各 样 
的 颜色 的 ，RGB 即 是 代表 红 、 绿 、 蓝 三 个 通道 的 颜色 ， 这 个 标准 几乎 包括 了 人 类 视力 所 能 
感知 的 所 有 颜色 ， 是 目前 运用 最 广 的 颜色 系统 之 一 。 

RGBA 有 了 时候 会 被 描述 为 一 个 颜色 空间 ， 但 是 它 其 实 仅仅 是 RGB 模型 附加 了 额外 的 

【 例 10.3】 

利用 前 面 示 例 的 内 容 通过 RGBA 更 改 文章 内 容 的 字体 颜色 。 实 现 步 骤 如 下 。 

鸭 罚 01】 向 HIML 网 页 中 添加 4 个 滑 块 ， 并 且 为 它们 指定 Change 事件 。 具 体 代码 

如 下 : 
R: <input id="rcolor" type="range" onChange="ChangeColor () " min="0" 


value="255" max="360" step="1"/> 


G: <input id="gcolor" type="range" min="0" max="360" step="1" value="100" 
onChange= "ChangeColor () "/> 


B: <input id="bcolor" type="range" min="0" max="360" step="1" value="255" 
onChange="ChangeColor()" /> 


A: <input id="acolor" type="range" min="0" max="1"” step="0.1" value="0.8" 
onChange="ChangeColor()" /> 


添加 ChangeColor0 函 数 ， 在 该 函数 中 首先 获取 各 个 滑 块 的 值 ， 然 后 将 这 些 
值 拼接 起 来 ， 青 更 改 span 元 素 的 值 和 文章 内 容 的 字体 颜色 。 完 整 代码 如 下 : 


<script> 

function ChangeColor(){ 
Var r = document .getElementById("rcolor") .value; // 获 取 Red 对 象 
Var g = document .getElementBylId("gcolor") .value; // 获 取 Green 对 象 
var b = document .getElementById ("bcolor") .value; // 获 取 Blue 对 象 
var a = document .getElementById("acolor") .value; // 获 取 透 明度 
var Pin = Ft tr" "Di" "Ta // 将 获取 到 的 值 拼接 起 来 
var value = document .getElementById ("showvalue"); // 获 取 span 对 象 
value.innerHTML = "rgba("+pin+")"; // 设 置 要 显示 的 值 
var set = document .getElementById ("MySet"); // 获 取 div 对 象 
set.style.color = "rgba("+pin+") "7 // 指 定 背 景 颜色 


} 
window.onload = ChangeColor; 
</script> 


在 浏览 器 中 运行 上 述 代 码 ， 查 看 效果 ， 初 始 效 果 如 图 10-8 所 示 。 
贺电 04| 随意 拖 动 滑 块 更 改 rgba0 中 的 值 ，rgba(72.66.0.0.9) 的 效果 如 图 10-9 所 示 。 
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把 不 喜欢 自己 的 人 忘掉 

这 个 作 乔 ， 站 有 人际 不 可 区 的 人 ， 亿 总 有 人 不 喜 攻 你 。 这 乔 俊 正 负 ， 测 下 ， 头 论 你 有 从 


| 入， 包 关 证 对 方 有 闫 妙 ， 者 首 束 全 多 不 但。 回国， 籽 不 好 是 一 加 更 ， 志 区 不 要 六 是 允 一 加 
| 


不 要 用 多 区 并 的 所 辜 ， 委 执 仿 一 个 俱 天 
|】 各 开 富 他 于 除 汪 内 条 的 ， 只 宫 是 对 方 筷 委 寺 届 商 效 下 和 吏 扒 所 使， 湾 肌 不错 ， 托 本 多 对 
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他 不 要 闪 坦 次 不 喜 次 上 ， 方 出 维 人 和 环 人 来 。 名 将 鲁 辽 慎 阅 的 吸光 ， 难 闪 太 隐 入 恤 隐 
咏 人 的 ， 信 不 需 讽 它 是 台风 。 委 对 是 要 哆 人 的 ， 芝 是 和 的 玉 尖 和 作曲 。， 色 就 是 说， 下 叮 逢 出 
人 的 同时 ， 于 要 香 到 自得 的 锯 隐 和 不 足 ， 
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(024 Opacity 属 性 


在 前 面 两 节 中 ，HSLA 和 RGBA 两 个 属性 中 都 涉及 到 了 透明 度 的 概念 ， 实 际 上 ，CSS 
3 还 为 开发 者 提供 了 opacity 属性 。opacity 属性 声明 元 素 的 不 透明 度 ， 该 属性 类 似 于 alpha 
透明 度 ， 不 透明 度 的 值 是 0~1 之 间 的 浮 点 数值 。 其 中 ，0 表示 完全 透明 ，1 表示 完全 不 透 
明 ， 而 0.5 则 表示 半 透 明 。 
【 例 10.4】 
重新 利用 上 面 的 内 容 演 示 opacity 属性 的 使 用 。 实 现 步骤 如 下 。 
向 页 面 中 添加 一 个 改变 背景 透明 度 的 滑 块 ， 默 认 值 是 1， 并 且 为 该 滑 块 添 
加 Change 事件 。 代 码 如 下 : 
opacity: <input id="opa" type="range" onChange="ChangeOpacity ()" 
step="0.1" min="0" value="1" max="1"/> 
向 ChangeOpacity0 函 数 中 添加 代码 ， 在 这 段 代码 中 获取 透明 度 的 值 ， 并 且 
更 改 D 属性 值 是 MySet 的 div 元 素 的 透明 度 ， 然 后 通过 ID 属性 值 是 showvalue 
的 span 元 素 显 示 透 明度 。 代 码 如 下 : 


function ChangeOpacity(){ 


Var opacity = document .getElementById ("opa") .value; 


Var bg = document .getElementById ("MySet"); 


bg.style.opacity = opacity; 


var span = document .getElementById ("showvalue"); 


span.innerHTML = "当前 设置 的 背景 透明 度 : 


} 
window.onload = ChangeOpacity; 


在 浏览 器 中 运行 上 述 代码 查看 效果 ， 初 始 效果 如 图 10-10 所 示 。 
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// 获 取 透 明度 的 值 
// 获 取 div 元素 
// 设 置 背景 颜色 的 透明 度 


10-10 opacity 属 性 值 为 1 时 的 效果 


T> 入 凌 E SSO 山中 人 驴 
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随意 拖 动 图 10-10 中 的 滑 块 查看 文章 内 容 透 明度 的 改变 情况 ， 如 图 10-11 


所 示 显 示 了 透明 度 为 0.6 时 的 效果 。 
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10-11 “opacity 属性 值 为 0.6 时 的 效果 


虽然 HSLA、RGBA 和 opacity 都 可 以 设置 透明 度 ， 但 是 它们 存在 着 很 重要 的 区 别 。 
opacity oo 但 是 半 透 明 的 RGBA 或 者 HSAL 颜色 只 会 


影响 在 当前 元 素 的 声明 ， 对 其 他 元 素 没有 影 
【 例 10.5】 


演示 HSLA 和 Opacity 属性 的 使 用 ， 通 过 该 例 可 以 看 出 它们 的 不 同 。 实 现 步骤 如 下 。 
力 国 01| 向 页 面 中 添加 两 个 div 元 素 ， 为 每 一 个 div 元 素 设置 class 属性 ， 并 且 第 一 
个 div 元 素 下 都 包含 一 个 p 元 素 。 部 分 代码 如 下 ; 


4 
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<div class="halfopaque"> 

&nbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 这 个 世界 ， 总 有 你 不 喜欢 的 人 ， 也 总 有 人 不 喜 
欢 你 。 这 都 很 正常 。 而 且 ， 无 论 你 有 多 好 ， 也 无 论 对方 有 多 好 ， 都 苛求 彼此 不 得 。 因 为 ， 好 不 好 是 
一 回 事 ， 喜 欢 不 喜欢 是 另 一 回 事 。 

<p>gnbsp; gnbsp; gnbsp; &nbsp; &nbsp; gnbsp; 刻意 去 讨 人 喜欢 ， 折 损 的 ， 只 能 是 自我 的 
尊严 。 不 要 用 无 数 次 的 折腰 ， 去 换 得 一 个 漠然 的 低 眉 。 结 尊 降 贵 换 来 的 ， 只 会 是 对 方 愈 发 地 居 高 临 
下 和 磊 指 气 使 。 没 有 平视 ， 就 永 无 对 等 。</p> 
</div> 
<div class="halfalpha"> 

<!-- 省 上 略 其 他 内 容 --> 


</div> 


区 国 02| 为 上 个 步骤 中 的 div 元 素 指定 CSS 样式 ， 样 式 代码 如 下 : 


div .halfopaque{ 
background-color: hsl(120,40%,40%); 
opacity: 0.5; 
color: #000000; 
font-size: 14px; 
| 
div .halfalpha{ 
background-color: hsla(120,40%,40%,0.5); 
color: #000000; 
font-size: 14px; 


} 
虽然 乍 看 起 来 ， 上 面 的 声明 块 是 相同 的 ， 实 际 上 它们 之 间 存 在 着 区 别 。halfopaque div 


元 素 中 的 任何 文本 也 都 将 50% 不 透明 ， 即 呈现 半 透 明 状 态 ，halfalpha div 元 素 中 的 文本 仍 
为 100% 不 透明 。 


葬 浪 03| 运行 上 述 代码 ， 查 看 透明 效果 ， 如 图 10-12 所 示 。 


ops “人 
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图 10-12 opacity 和 hsla 的 使 用 


10.3 CSS 3 新 增 的 选择 器 


要 使 用 CSS 对 HTML 页 面 中 的 元 素 实现 一 对 一 、 一 对 多 或 者 多 对 一 的 控制 ， 这 就 需 


要 用 到 CSS 选择 器 。HTML 页 面 中 的 元 素 就 是 通过 CSS 选择 器 进行 控制 的 ，CSS 3 新 增 
了 多 种 选择 器 ， 下 面 对 这 些 选择 器 进行 简单 了 解 。 


(03.1 属性 选择 器 


在 CSS 2 中 已 经 引入 了 属性 选择 器 ， 属 性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 
元 素 。CSS 3 中 增加 了 更 高 级 的 选择 器 ， 这 些 选择 器 包含 了 更 多 的 部 分 值 属性 选择 器 ， 按 
照 规 范 的 说 法 ， 应 该 将 它们 称 为 “ 子 串 匹配 属性 选择 器 ”。 

CSS 3 中 新 增加 的 3 个 属性 选择 器 及 其 说 明 如 下 。 

@ [attribute^= “val"]: 匹配 具有 attribute 属性 且 值 以 value 开头 的 元 素 。 

e@ [attribute$=“val”"]: 匹配 具有 attribute 属性 且 值 以 value 结尾 的 元 素 。 

e@ [attribute*=“val”"]: 匹配 具有 attribute 属性 且 值 中 含有 value 的 元 素 。 

【 例 10.6】 

向 页 面 中 添加 3 个 div 元 素 ， 并 且 为 这 些 div 元 素 指定 不 同 的 class 属性 值 。 实 现 步骤 
如 下 。 

向 页 面 中 添加 3 个 div 元 素 ， 每 一 个 div 元 素 的 class 属性 不 同 。 部 分 代码 

如 下 : 


<div class="testOne"> 

&nbsp; &nbsp; gnbsp; gnbsp; gnbsp; gnbsp; 这 个 世界 ， 总 有 你 不 喜欢 的 人 ， 也 总 有 人 不 喜 
欢 你 。 这 都 很 正常 。 而 且 ， 无 论 你 有 多 好 ， 也 无 论 对 方 有 多 好 ， 都 苛求 彼此 不 得 。 因 为 ， 好 不 好 是 
- 回 事 ， 喜 欢 不 喜欢 是 另 一 回 事 。</div> 
<div class="Twotest"><! 一 文章 内 容 --></div> 
<div class="mytestthree"><!-- 文章 内 容 --></div> 


定义 class 属性 值 以 test 开头 的 div 元 素 的 背景 颜色 为 术 FAAD5， 以 test 结 
尾 的 div 元 素 的 字体 颜色 为 蓝 色 ， 字 体 大 小 为 14 像素 ， 字 体 为 “仿宋 ”。 步 骤 如 下 : 
div[class^="test"] { 


background-color: #FFAADS5; 
} 
div[class$="test"] { 
color: blue; 
font-size: 14px; 
font-family: "仿宋 "; 
} 


在 浏览 器 中 运行 上 述 代 码 ， 观 察 属性 选择 器 的 作用 效果 。 效 果 如 图 10-13 
所 示 。 


an 
千言 GD fle///D/htmis/cssoper/shchtml 三 


把 不 喜欢 自己 的 人 右 阐 


10-13 ”属性 选择 器 的 效果 
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(032 结构 化 伪 类 选择 器 


结构 化 伪 类 选择 器 用 于 向 某 些 选择 器 添加 特殊 的 效果 。 在 介绍 新 增 的 结构 性 伪 类 选择 
器 之 前 ， 了 解 一 下 伪 类 选择 器 和 伪 元 素 选择 器 。 伪 类 选择 器 是 指 已 经 定义 好 的 选择 器 ， 不 
E 随 便 取 名 ， 例 如 作用 在 a 元 素 中 的 a:link、a:visited、a:hover 和 a:active。 伪 元 素 选 择 器 
并 不 是 真正 的 元 素 使 用 的 选择 器 ， 而 是 针对 CSS 中 已 经 定义 好 的 伪 元 素 使 用 的 选择 器 ， 例 
如 first-line、first-letter、before 和 after 是 4 种 伪 元 素 选择 器 。 

CSS 3 中 新 增加 了 一 些 结构 化 伪 类 选择 器 ， 表 10-1 对 这 些 选择 器 进行 了 说 明 。 


表 10-1 结构 化 伪 类 选择 器 


选择 器 名 称 说 明 
E:root 匹配 文档 的 根 元 素 。 在 HTML 中 ， 根 元 素 永远 是 html 
E:nth-child(n) 匹配 父 元 素 中 的 第 n 个 子 元 素 E 
E:nth-last-child(n) 匹配 父 元 素 中 的 倒数 第 n 个 结构 子 元 素 E 
E:nth-of-type(n, 匹配 同类 型 中 的 第 n 个 同 级 兄弟 元 素 E 
E:nth-last-of-type(n 匹配 同类 型 中 的 倒数 第 ma 个 同 级 兄弟 元 素 E 
E:last-child 匹配 父 元 素 中 最 后 一 个 EE 元 素 
E:first-of-type 匹配 同 级 兄弟 元 素 中 的 第 一 个 E 元 素 
E:only-child 匹配 属于 父 元 素 中 唯一 子 元 素 的 了 
E:only-of-type 匹配 属于 同类 型 中 唯一 兄弟 元 素 的 了 
E:emp 匹配 没有 任何 子 元 素 (包括 text 节点 ) 的 元 素 卫 

【 例 10.7】 


更 改 例 10.6 中 的 样式 代码 ， 指 定 class 属性 中 包含 test 属性 值 的 div 元 素 的 同 级 奇数 个 
(例如 第 1 个 、 第 3 个 ) 元 素 的 背景 颜色 。 样 式 代码 如 下 : 
div[class*="test"] :nth-of-type (odd) { 


background-color: #FFAADS5; 
, 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 10-14 所 示 。 
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这 个 世界 ,总 说 作 下 三 2 的 人 TT 天 的 作用 好， 位 无 这 对 方 有 多 好， 都 轩 下 委 灶 不但 回力 ， 
站 而 只 一 加 于 。 
多 去 计 人 喜 丈 ， 关 | 办 ， 只 民 术 自制 严 。 二 要 几 天 和 和 浙 钼 ， 去 守则 一 个 重信 届 - 和 及 委 性 3 ， 关 会 昌 1 方 计量 
ET 

信守 好人 各 皇 人 大 。 丙 交情 时 铺 3 育 湖 兴 ,于 党 评 隐 入 汝 卫 。 辽 人 的 。 伯 二 民 积 记 是 措 。 尖 呈 果 要 达 人 的 
这 本 央 的 天 共和 局 向 ， 所 沪 旺 讽 ， 在 条 委 到 人 的 名 于 更 看 到 咎 了 0 下 了 


Cd 10-14 例 10.7 的 效果 


(03.3 目标 伪 类 选择 器 


CSS 3 新 增 了 一 种 目标 伪 类 选择 器 ， 用 于 匹配 相关 URL 指向 的 王 元 素 。 
基本 语法 如 下 : 


E:target{ 
/* 样 式 代 码 */ 


1> 洲 党 8SSO 需 01 雏 沪 


| 


1 
如 下 代码 演示 了 E:target 选择 器 的 简单 使 用 : 


p:target{ 
border: 2px solid #D4D4D4; 
background-color: #e5eecc; 


} 


(03.4 UI 元 素 状 态 伪 类 选择 器 


CSS 3 中 新 增 了 4 种 UI 元 素 状态 伪 类 选择 器 ， 其 说 明 如 表 10-2 所 示 。 
表 10-2 UI 元 素 状态 伪 类 选择 器 


选择 器 名 称 说 明 
E:enabled 匹配 所 有 用 户 界面 (form 表单 ) 中 处 于 可 用 状态 的 EE 元 素 
E:disabled 匹配 所 有 用 户 界面 (form 表单 ) 中 处 于 不 可 用 状态 的 EE 元 素 
E:checked 匹配 所 有 用 户 界面 (form 表单 ) 中 处 于 选中 状态 的 元 素 E 
E::selection 匹配 EE 元 素 中 被 用 户 选中 或 处 于 高 亮 状 态 的 部 分 
【 例 10.8】 


例如 ， 首 先 向 HTML 页 面 的 表单 元 素 中 添加 两 个 单 选 按钮 。 代 码 如 下 : 


<form method="post" action=""> 
<input type="radio" name="css3" checked="checked" /> 男 
<input type="radio" name="css3" /> 女 

</form> 


通过 E:checked 选择 器 指定 选中 单 选 按钮 时 input 元 素 的 样式 。 代 码 如 下 : 


input:checked{ 
outline: dashed Spx; 
} 


在 浏览 器 中 运行 上 述 代码 查看 效果 。 
(10.3.5 否定 伪 类 
否定 伪 类 用 于 匹配 所 有 不 匹配 简单 选择 符 s 的 元 素 。 基 本 语法 如 下 : 


E:not(s):{attribute} 
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例如 ， 下 面 的 样式 表示 设置 非 p 元 素 的 所 有 元 素 的 背景 色 : 


E:not (p){ 
background-color: #ff£f0000; 
} 


(0.3.6 通用 兄弟 选择 器 
CSS 3 中 的 通用 兄弟 选择 器 是 指 E~F， 用 于 匹配 卫 元 素 之 后 的 下 元 素 。 
基本 语法 如 下 : 
E~F : {attribute} 
例如 ， 下 面 的 样式 表示 匹配 div 元 素 之 后 的 p 元 素 背 景 颜色 : 
div~pi 


background-color: #00FF00; 
| 


10.4 CSS 3 的 新 增 属 性 


除了 新 增 颜 色 、 新 增 选择 器 外 ，CSS 3 中 还 增加 了 许多 属性 ， 使 用 这 些 属 性 可 以 更 加 
快速 地 设计 网 页 效果 。 


《0o3: 边框 属性 


在 CSS 2 中 使 用 border 属性 只 能 设置 纯色 或 者 简单 的 线条 ，CSS 3 中 添加 了 新 的 边框 
样式 ， 可 以 使 用 图 片 设置 边框 样式 和 颜色 ， 还 可 以 添加 阴影 框 ， 甚 至 可 以 实现 创建 圆 角 边 
框 的 功能 。 例 如 ， 表 10-3 列 出 了 CSS 3 中 新 增 的 边框 属性 ， 并 对 这 些 属性 进行 了 说 明 。 

表 10-3 ”新 增加 的 边框 属性 
属性 名 称 说 明 


border-image 


设置 边框 背景 图 像 

指定 边框 图 像 区 域 超出 边框 的 量 

图 像 边框 平 铺 方 式 ， 其 值 包 括 repeated( 平 铺 )、rounded( 铺 满 ) 和 stretched( 拉 伸 ) 
指定 图 像 边框 的 向 内 偏 移 


border-image-outset 


border-image-repeat 


border-image-slice 


border-image- 指定 用 作 边框 的 图 片 
source, 

border-image-width | 指定 图 片 边框 的 宽度 
border-shadow 设置 边框 的 阴影 效果 
border-radius 设置 边框 的 圆 角 效果 


NN 


第 

oS 

(10.4.2 背景 属性 
OO 

CSS 3 中 新 增加 的 背景 属性 有 3 个 ， 它 们 分 别 是 background-clip、background-origin 和 8 
background-size。 快 
@ background-clip: 指定 背景 的 绘制 区 域 。 总 

@ 。 background-origin: 指定 背景 图 片 的 定位 区 域 。 门 


@ ” background-size: 指定 背景 图 片 的 尺寸 。 


(043 文本 属性 


CSS 3 中 新 增加 了 一 系列 的 文本 属性 ， 通 常 这 些 属 性 可 以 对 文本 进行 操作 ， 表 10-4 列 
出 了 这 些 属性 。 


表 10-4 新 增加 的 文本 属性 


属性 名 称 说 明 
hanging-punctuation 指定 标点 字符 是 否 位 于 线 框 之 外 
punctuation-trim 指定 是 否 对 标点 字符 进行 修剪 
text-align-last 设置 如 何 对 齐 最 后 一 行 或 紧 挨 着 强制 换行 符 之 前 的 行 
text-emphasis 向 元 素 的 文本 应 用 重点 标记 以 及 重点 标记 的 前 景色 
text-justify 指定 当 text-align 设置 为 justify 时 所 使 用 的 对 齐 方法 
text-outline 指定 文本 的 轮廓 
text-overflow 指定 当 文本 溢出 包含 元 素 时 发 生 的 事情 
text-shadow 向 文本 添加 阴影 
text-wrap 指定 文本 的 换行 规则 
word-break 指定 非 中 日 韩文 本 的 换行 规则 
word-wrap 允许 对 长 的 不 可 分 割 的 单词 进行 分 割 并 换行 到 下 一 行 


(04.4 盒 模型 属性 


盒 模型 可 以 轻松 地 创建 适应 浏览 器 窗口 的 流动 布局 或 者 自 适 应 字体 大 小 的 布局 。 
CSS 3 中 增加 了 一 系列 的 盒 模型 属性 ， 如 表 10-5 所 示 。 


表 10-5 盒 模 型 属性 


属性 名 称 说 _ 明 
overflow-x 检索 或 设置 当 对 象 的 内 容 超过 其 指定 宽度 时 如 何 管理 内 容 
overflow-y 检索 或 设置 当 对 象 的 内 容 超过 其 指定 高 度 时 如 何 管理 内 容 . C 
Overflow-style 指定 溢出 元 素 的 首选 滚动 方法 “| 
box-align 定义 子 元 素 在 傅 子 内 垂直 方向 上 的 空间 分 配方 式 *W 
a 
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属性 名 称 


续 表 


box-direction 


定义 盒子 的 显示 顺序 


定义 子 元 素 在 盒子 内 的 自 适 用 尺 才 


box-flex-group 定义 自 适 应 子 元 素 群 组 
box-lines 定义 子 元 素 分 列 显示 


定义 盒子 分 布 的 坐标 轴 


定义 子 元 素 在 盒子 内 的 显示 位 置 


(0.4.5 用 户 界 面 属性 
用 户 界面 属性 用 来 定义 与 界面 有 关 的 内 容 ， 表 10-6 对 这 些 属性 进行 了 说 明 。 
表 10-6 用 户 界面 属性 


定义 子 元 素 在 盒子 内 水 平方 向 的 空间 分 配方 式 


属性 名 称 说 明 
appearance 允许 将 元 素 设 置 为 标准 用 户 界面 元 素 的 外 观 
box-sizint 允许 以 确切 的 方式 定义 适应 某 个 区 域 的 具体 内 容 
icon 为 创作 者 提供 使 用 图 标 化 等 价 物 来 设置 元 素 样式 的 能 力 
nav-down 指定 在 使 用 arow-down 导航 键 时 向 何 处 导航 
nav-index, 设置 元 素 的 Tab 键 控制 次 序 
nav-left 指定 在 使 用 arow-left 导航 键 时 向 何 处 导航 
nav-right 规定 在 使 用 arrow-right 导航 键 时 向 何 处 导航 


DaV-U] 


规定 在 使 用 arow-up 导航 键 时 向 何 处 导航 


outline-offset 
resize 


Z00I 


对 轮廓 进行 偏 移 ， 并 在 超出 
指定 是 否 可 由 用 户 对 元 素 的 
设置 或 检索 对 象 的 缩放 比例 


(04.6 新 增 的 其 他 属性 


CSS 3 中 新 增加 了 多 种 属性 ， 除 了 前 面 几 节 介绍 的 属性 外 ， 还 包含 多 列 类 布局 属性 和 
动画 属性 等 多 个 属性 ， 表 10-7 对 这 些 属性 进行 了 说 明 。 


表 10-7 CSS 3 中 新 增 的 其 他 属性 


边框 边缘 的 位 置 绘制 轮廓 
尺寸 进行 调整 


属性 名 称 说 明 
columns 可 以 同时 定义 多 栏 的 数目 和 每 栏 宽度 
column-width 可 以 定义 每 栏 的 宽度 
column-span 定义 元 素 可 以 在 栏目 上 定位 显示 


N 


卉 
Ea 
续 表 已 
属性 名 称 说 明 可 
column-mle 定义 每 栏 之 间 边 框 的 宽度 、 样 式 和 颜色 3 
column-rule-color 定义 每 栏 之 间 边 框 的 颜色 
column-mle-width 定义 每 栏 之 间 边 框 的 宽度 
column-rule-style 定义 每 栏 之 间 边 框 的 样式 定 
column-gap 定义 两 栏 之 间 的 间距 距离 
column-fill 定义 栏目 的 高 度 是 否 统一 
column-count 可 以 定义 栏目 的 数目 
column-break-before 定义 元 素 之 前 是 否 断 行 
column-break-after 定义 元 素 之 后 是 否 断 行 
keyframes 定义 动画 
animation 所 有 动画 属性 的 简写 属性 ， 除 了 animation-play-state 属性 
animation-name 定义 @keyframes 动画 的 名 称 
animation-duration 定义 动画 完成 一 个 周期 所 花费 的 秒 或 毫秒 
animation-timing-function 定义 动画 的 速度 曲线 
animation-dela; 定义 动画 何 时 开始 
animation-iteration-count 定义 动画 被 播放 的 次 数 
animation-direction 定义 动画 是 否 在 下 一 周期 逆向 地 播放 
animation-play-state 定义 动画 是 否 正 在 运行 或 暂停 
animation-fill-mode 定义 对 象 动画 时 间 之 外 的 状态 
transition 简写 属性 ， 用 于 在 一 个 属性 中 设置 4 个 过 渡 属 性 
transition-prope 规定 应 用 过 渡 的 CSS 属性 的 名 称 
transition-duration 指定 过 渡 效 果 花 费 的 时 间 
transition-timing-function 指定 过 渡 效果 的 时 间 曲 线 
transition-dela 指定 过 渡 效果 何 时 开始 
rm Er 
= 提示 : CSS 3 的 功能 非常 强大 ， 实 际 上 ， 它 的 新 增 属性 远 不 止 本 节 所 介绍 的 这 
些 ， 而 且 本 节 列 出 的 这 些 属性 并 不 一 定 都 是 常用 的 ， 有 些 属 性 虽然 是 CSS 3 中 新 增加 
的 ， 但 是 并 不 经 常 被 使 用 。 关 于 其 他 的 新 增 属 性 ， 感 兴趣 的 读者 可 以 在 网 络 上 查找 相关 
的 资料 。 
10.5 “实战 一 一 以 CSS 3 属性 制作 漂亮 按钮 
CSS 3 的 功能 非常 强大 ， 本 章 简单 介绍 了 CSS 3 的 基础 知识 和 新 增 属性 ， 本 节 实 战 将 Pp 8 
利用 CSS 3 中 的 属性 制作 页 面 中 常见 的 按钮 。 图 10-15 显示 了 第 一 个 页 面 中 的 按钮 内 容 。 SN 
.| 
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10-15 页面 中 的 漂亮 按钮 (1) 


根据 图 10-15 的 页 面 效果 设计 页 面 ， 实 现 步 又 如 下 。 

设计 页 面 标题 ， 标 题 通过 header 元 素 实现 ， 向 该 元 素 中 添加 子 标题 和 副 标 
题 ， 并 且 添 加 两 个 链接 。 页 面 代码 如 下 : 

<header> 
<h1>Css <span>buttons</span></h1> 
<h2>with pseudo-elements</h2> 


<nav class="codrops-demos"> 
<a class="current" href="index.html"> 示 例 1</a> 


<a href="index2.html"> 示 例 2</a> 
<a href="index3.html"> 示 例 3</a> 
</nav> 
</header> 
继续 在 上 个 页 面 的 基础 上 添加 代码 ， 通 过 section 元 素 控制 页 面 中 的 按钮 。 
页 面 代码 如 下 : 
<section> 


<div id="container buttons"> 
<p><a href="#" class="a demo one">Click me! </a></p> 
<p><a href="#" class="a demo one">Come on, don't be afraid</a></p> 
<p><a href="#" class="a demo one"> 
You can make this as wide as you want ;) </a></p> 
</div> 
</section> 


[03| 为 页 面 中 的 div 元 素 和 a 元 素 添加 CSS 样式 ， 包 括 宽度 、 填 充 距离 、 背 
景 、 圆 角 以 及 阴影 效果 等 内 容 。 代 码 如 下 : 


#container buttons{ 


CO 


width: 400px; // 宽 度 
padding: 60px 60px 30px; // 填 充 距离 
border-radius: 20px; // 圆 角 样 式 
background: rgba(255,255,255,0.3); // 背 景 


box-shadow: 3px 3px 3px rgba(0,0,0,0.09) inset; // 阴 影 效果 
border: lpx solid #CCC; // 边 框 样式 


N 


勾 
第 
国 轨 04] 继续 为 步骤 02 中 的 a 元 素 添加 样式 ， 通 过 border-radius 属性 设置 圆 角 效 。“ 
果 ， 通 过 border-shadow 属性 设置 阴影 效果 ， 通 过 background-image 属性 设置 背 章 
景 图 片 等 。 代 码 如 下 : 8 
on 
.a demo one { Co 
background-color: #3bb3e0; // 背 景 颜色 快 
padding: 10px; // 填 充 距离 村 
Position: relative; 门 
font-family: "Open Sans', sans-serif; // 字 体 样式 
font-size: 12px; // 字 体 大 小 
text-decoration: none; 
COLOR 4EEE> // 字 体 颜色 
border: solid 1px #186f8f; // 边 框 
border-radius: 5px; // 圆 角 


background-image: linear-gradient (bottom, rgb(44,160,202) 0%, 
rgb(62,184,229) 100%); 

box-shadow: inset Opx lpx Opx #7fd2f1, Opx lpx Opx #fff; 

/* 省 略 浏览 器 的 私有 属性 设置 */ 


加 05 | 设置 前 两 个 步骤 中 其 他 元 素 的 相关 样式 代码 ， 具 体 的 代码 不 再 显示 。 
珊 E 运行 上 述 代 码 查看 效果 ， 制 作 的 按钮 效果 如 图 10-16 所 示 。 
创建 index2.html 网 页 ， 显 示 一 种 新 类 型 的 按钮 ， 效 果 如 图 10-16 所 示 。 
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图 10-16 页 面 中 的 漂亮 按钮 (2) 


根据 图 10-16 的 效果 添加 页 面 代码 和 样式 代码 ， 该 页 面 的 大 多 数 代码 都 与 
上 个 页 面相 似 ， 主 要 不 同 在 于 链接 按钮 的 class 属性 。 本 页 面 将 class 属性 的 值 指 
定 为 a_demo_two， 页 面 代码 不 再 显示 。 

为 class 为 a_demo_two 的 代码 设置 样式 ， 部 分 CSS 样式 如 下 : 

.a demo two { 

/* 省 略 其 他 内 容 */ 

color: #EEEs 

background-image: linear-gradient (bottom, rgb(44,160,202) 0%, 
rgb(62,184,229) 100%); 

box-shadow: inset 0px lpx Opx #7fd2f1, Opx 6px Opx #156785; 

border-radius: 5px; 


335 SS 


力 表 10| 根据 需要 向 页 面 中 添加 其 他 代码 。 


10.6 本 章 习题 
1. 填空 题 
(1) 是 代表 色调 、 饱 和 度 和 亮度 三 个 通道 的 颜色 。 
(2) 是 在 HSL 的 基础 上 增加 一 个 透明 度 的 设置 ， 它 是 HSL 颜色 值 的 扩展 。 
(3) CSS 3 新 增加 的 属性 用 于 设置 圆 角 效果 。 
2. 选择 题 
(1) opacity 属性 的 值 为 时 表示 完全 透明 。 
A. 0 Bi C. 0% D. 100% 
(2) CSS 3 中 新 增加 的 属性 选择 器 不 包括 
A. [attribute^="“val”] B. [attribute$="“val”] 
C. [attribute*="“val”] D. [attribute="“val”] 
(3) UI 元 素 状态 伪 类 选择 器 中 ， 匹配 所 有 用 户 界面 中 处 于 可 用 状态 的 元 素 。 
A. E:enabled B. E:disabled C. E:checked D. E::selection 
(4) CSS 3 在 实现 动画 效果 时 ， 通 过 定义 动画 。 
A. transform B. @keyframes C. animation D. animation-name 
3. 上 机 练习 


细心 的 读者 可 能 已 经 注意 到 ， 在 10.5 节 实 战 中 包含 3 个 页 面 ， 但 是 只 介绍 了 前 两 个 页 
面 的 功能 实现 。 本 次 上 机 练习 要 求 读者 利用 实战 的 代码 ， 根 据 如 图 10-17 所 示 的 效果 完成 


页 面 的 最 终 设计 。 
人 a EI x 
D css 属 全 于 例 * T 
一 © [file:///D:/htmlS/cssoper/index3.html 安 | 王 


图 10-17 上 机 练习 


CSS 3 新 增 的 选择 器 


选择 器 是 W3C 在 CSS 3 工作 草案 中 独立 引入 的 一 个 新 概念 ， 在 有 些 资料 
中 ， 通 常 将 选择 器 称 为 选择 符 。 实 际 上 ，CSS 1 和 CSS 2 中 已 经 非 系统 性 地 定义 
了 许多 常用 的 选择 器 (例如 元 素 选择 器 和 样式 选择 器 )， 这 些 选择 器 基本 上 能 够 满 
足 Web 设计 师 常 规 的 设计 需求 。 本 章 向 读者 介绍 CSS 3 中 新 增 的 多 种 选择 器 。 
通过 本 章 的 学 习 ， 读 者 可 以 使 用 这 些 选 择 器 设计 出 漂亮 、 美 观 的 网 页 。 


本 章 学 习 目 标 : 

掌握 新 增 的 属性 选择 器 

掌握 nth 选择 器 的 使 用 

熟悉 E:root 和 其 他 结构 化 伪 类 选择 器 
熟悉 E:target 选择 器 的 使 用 

误 悉 E:not(s) 选 择 器 的 使 用 

了 解 E- 下 选择 器 的 使 用 


ieeeeee 
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11.1 属性 选择 器 


属性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。CSS 3 中 新 增 了 3 种 属性 选择 
器 ， 本 节 简 单 了 解 这 些 选 择 器 。 


(0 .1 E[att^=value] 选 择 器 


E[att^=value] 选 择 器 是 指 选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 att 属性 ，att 属性 值 包含 
前 级 为 value 的 子 字符 串 。 需 要 注意 的 是 E 是 可 以 省 略 的 ， 如 果 省 略 时 ， 表 示 可 以 匹配 任 
意 类 型 的 元 素 。 

【 例 11.1】 

为 了 演示 本 小 节 以 及 后 面 小 节 介绍 的 选择 器 ， 首 先 通过 普通 的 CSS 样式 设置 显示 内 容 
的 样式 ， 然 后 再 使 用 [att^=value] 选 择 器 进行 奉 换 。 实 现 步骤 如 下 。 

加 为 01| 向 页 面 中 添加 div 元 素 ， 并 且 向 该 元 素 中 分 别 添加 hl、div 和 dl 等 元 素 。 

页 面 代码 如 下 : 


<div class="demo clearfix"> 
<h1> 减 肥水 果 热 量 排 行 榜 </h1> 
<div> 吃 水 果 减 肥 ， 是 不 少女 性 最 喜欢 使 用 的 方法 之 一 。 那 么 ， 生 活 中 常见 的 一 些 水 果 热 量 到 
底 如 何 ? 为 了 避免 言 目 选择 ， 不 妨 让 我 们 给 它们 排 排 位 :</div> 
<dl> 
<dt><a href="http://www.baidu.com" id="first">1</a> 柠 檬 </dt> 
<dd>100 克 /24 卡路里 柠檬 中 的 柠檬 酸 能 促进 热量 代谢 ， 而 且 它 的 维生素 C 含量 是 水 果 
中 的 佼佼 者 ， 美 白 效果 好 ， 热 量 又 低 ， 爱 美 想 瘦 的 女性 可 适量 食用 ， 但 避免 空腹 吃 。</dd> 
<dt><a href="mailto:abcel163.com" id="second">2</a> 菠 葛 </dt> 
<dd>100 克 /32 卡路里 属于 酸性 水 果 ， 可 以 整 肠 和 助 消化 ， 加 上 菠萝 富 含 的 酵素 能 有 益 
体内 毒素 分 解 ， 促 进 排水 ， 排 脂 ， 所 以 ， 那 些 想 要 减肥 的 女性 ， 可 以 餐 后 适量 食用 。</ddq> 
<!-- 省 略 其 他 内 容 --> 
</dl> 
</div> 


为 上 述 内 容 中 的 div 元 素 和 a 元素 添加 样式 ， 样 式 代码 如 下 : 


.demo { 
width: 95%3 
border: lpx solid #ccc; 
height: 400px; 
padding: 10px; 

} 

.demo a { 
float: left; 
display: block; 


height: 20px; /* 高 度 */ 

line-height: 20px; /* 行 高 */ 

width: 20px; /* 宽 度 */ 

-moz-border-radius: 10px; /* Firefox 等 浏览 器 的 私有 属性 */ 
-webkit-border-radius: 10px; /* Chrome 等 浏览 器 的 私有 属性 */ 


border-radius: 10px; 


text-align: center; 

background: #f36; /* 背 景 颜色 */ 
color: green; /* 字 体 颜 色 */ 
margin-right: Spx; 

text-decoration: none; 


力 国 03] 在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 11-1 所 示 。 
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11-1 ”初始 运行 效果 


继续 在 上 面 样式 的 基础 上 添加 新 的 代码 ， 如 下 所 示 : 


.demo a[href^="http://"]{ 
background: orange; 
color: green; 

} 

.demo a[href^="mailto:"]{ 
background: green; 
color: orange; 

} 

上 述 代码 使 用 到 了 [att^=value] 选 择 器 ， 该 选择 器 选择 了 href 属性 ， 并 且 分 别 指定 为 属 
性 值 以 “http:/” 和 “mailto: ”开头 的 所 有 a 元 素 。 只 要 a 元 素 中 的 href 属性 值 是 以 
“http:/” 或 “mailto:” 开 头 的 a 元 素 都 会 选中 ， 并 且 将 以 “http://” 开 头 的 a 元 素 的 背景 
色 为 orange， 颜 色 为 green， 以 “mailto:” 开 头 的 a 元 素 背 景色 为 green， 颜 色 为 orange。 

刷新 或 者 重新 运行 上 述 代码 ， 此 时 效果 如 图 11-2 所 示 。 
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11-2 ”[att^=value] 选 择 器 的 使 用 
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(人 .2 ”Elatt$=value] 选 择 器 


E[att$=value] 用 于 表示 选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 att 属性 ，att 属性 值 包含 后 
缀 为 value 的 子 字 符 串 。E[att$=value] 与 E[att^=value] 属 性 器 一 样 ，E 元 素 可 以 省 略 ， 如 果 
省 略 ， 则 表示 可 匹配 任意 类 型 的 元 素 。 

【 例 11.2】 

继续 在 前 面 示例 的 基础 上 进行 更 改 ， 通 过 E[att$=value] 选 择 器 指定 a 元 素 的 id 属性 ， 
设置 id 属性 以 也 结尾 的 元 素 样式 。 相 关 代 码 如 下 : 

.demo a[id$="th"]{ 

background: blue; 
color: white; 
} 

在 上 述 代 码 中 ， 如 果 a 元 素 的 id 属性 以 也 结尾 ， 那 么 将 该 元 素 的 背景 颜色 设置 为 
blue， 字 体 颜色 设置 为 white。 

在 浏览 器 中 运行 本 例 的 代码 ， 效 果 如 图 11-3 所 示 。 
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11-3 [att$=value] 选 择 器 的 使 用 


(1 .3 ”El[att*=value] 选 择 器 


E[att*=value] 选 择 匹 配 E 元 素 ， 且 该 元 素 定 义 了 att 属性 ，att 属性 值 包含 value 的 子 字 
符 串 。 该 选择 器 与 前 两 个 选择 器 一 样 ，E 元 素 也 可 以 省 略 ， 如 果 省 略 ， 则 表示 可 以 匹配 任 
意 类 型 的 元 素 。 

【 例 11.3】 

在 前 面 示例 的 基础 上 进行 更 改 ， 选 择 div.demo 元 素 下 的 a 元 素 ， 而 元 素 的 href 属性 只 
要 包含 # 就 符合 选择 条 件 。 代 码 如 下 : 

.demo a[href*="#"]{ 


background: black; 
color: white; 


在 浏览 器 中 运行 本 例 的 代码 ， 查 看 效果 ， 如 图 11-4 所 示 。 


5 * 
了 c file///D:/htmlS/selector/third html ?二 

减 取 水 果 热 重 排行 榜 

和 水 时 项 四 ， 是 不 少 文 性 各 着 家 使 风 的 方 运 一 那么 ， 生 看 中 策 2) 一 华 水 了 过 量 便 讨 19 癌 7 为 了 看 免 音 自 运行 ， 不 极 训 S1 人 时 它 

TD 

@" 
00 训 24 人 卡 产 里 从 才 中 们 站 二 次 保志 从 有 代 天 ,而 且 EW7 乔 主要 C 仿 驹 着 水 轩 中 交代 全 重 ， 半 合生 者 他， 公民 从 乐 ， 贷 关 
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卡 拓 里 于 角 性 水 寻 。 同 愉 要 队 宙 下 化 ， 加 上 第 大 上 人间 家 有 人 外 六 间 宣 呈 靖 ， 促 记 村 水 天 阅 ， 拓 以， 
EM 太 性 ， 同 以 科 怀 各 丰胸- 
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涉 。 作 入 从 实干 世 PER 妆 怕 有 三。 


00 123 丰 入 时 各 括 煌 汪 、 隐 并 和 要 乒 短 ， 本 岂 尖 提取 ， 折 交付 半 闪 本 多 生 入 ， 星 一 从 全 绎 0 提 本 其 


O00 90 不 耻 半 训 二 计生 CRN 寺 队 、 可 各 化 和 从 了 肤 ， 芝 和 特 提 人 它 克 力 前 季 VT4EN 关 闪 相 可 入 要 。 
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11-4 ”[att*=value] 选 择 器 的 使 用 


11.2 ”结构 化 伪 类 选择 器 


结构 化 伪 类 选择 器 是 CSS 3 选择 器 的 最 新 部 分 ， 它 的 内 容 非 常 重要 ， 有 些 学 者 将 这 节 
中 以 nth 开头 的 选择 器 称 为 nth 选择 器 。 本 节 将 对 CSS 3 中 新 增加 的 结 0 
行 介绍 。 


(0121 E:root 选 择 器 


E:root 选择 器 很 容易 理解 ， 它 匹配 文本 的 根 元 素 。 在 一 个 HTML 文档 中 ， 它 的 根 元 素 
永远 是 html， 因 此 E:root 选择 器 与 html 元 素 选择 器 匹配 的 内 容 相同 。 如 下 是 E:root 选择 器 
的 基本 使 用 : 


html:root { 
background-color: red; 


| 
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E:nth-child(n) 选 择 器 选择 所 有 在 父 元 素 中 第 n 个 位 置 匹配 E 的 子 元 素 。E:nth-child(n) 
选择 器 中 ， 参 数 n 可 以 是 数字 (例如 1、2、3)、 关 键 字 (例如 odd 表示 奇数 、even 表示 偶 
数 )、 公 式 (例如 2n、2n+3)， 参 数 的 索引 起 始 值 为 1， 而 不 是 0。 例 如 tr:nth-child(3) 表 示 匹 
配 所 有 表格 里 排 第 3 行 的 tr 元 素 ，tr:nth-child(2n) 和 tr:nth-child(even) 两 种 形式 都 表示 匹配 
所 有 表格 的 偶数 行 。 

【 例 11.4】 
在 前 面 示例 的 基础 上 更 改 代 码 ， 指 定 div.demo 下 第 3 个 dt 元 素 中 字体 的 颜色 ， 并 且 
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指定 该 元 素 下 a 元 素 的 圆 角 边框 、 背 景 颜 色 和 字体 颜色 。 样 式 代 码 如 下 : 


-demo dt:nth-child(3){ 
color: #FF8040; 

} 

.demo dt:nth-child(3) at{ 
background: lime; 
color: blue; 
—webkit-border-radius: Opx; /* Chrome 等 浏览 器 的 私有 属性 */ 
-o-border-radius: Opx; /* Opera 等 浏览 器 的 私有 属性 */ 
border-radius: Opx; 


上 
在 浏览 器 中 运行 本 例 的 代码 ， 效 果 如 图 11-5 所 示 。 
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E:nth-last-child(n) 选 择 器 选择 所 有 在 其 父 元 素 中 倒数 第 n 个 位 置 的 匹配 E 的 子 元 素 。 
该 选择 器 的 计算 顺序 与 E:nth-child(m) 相 反 ， 但 是 语法 和 用 法 相同 。 
【 例 11.5】 
重新 更 改 上 个 示例 中 的 代码 ， 指 定 倒数 第 2 个 dt 元 素 的 字体 颜色 和 该 元 素 下 a 元 素 的 
到 角 边框 效果 。 代 码 如 下 : 


.demo dt:nth-last-child(2){ 
color: #FF8040; 


} 

.demo dt:nth-last-child(2) af 
background: lime; 
color: blue; 
-webkit-border-radius: 0px; /* Chrome 等 浏览 器 的 私有 属性 */ 
-0o-border-radius: Opx; /* Opera 等 浏览 器 的 私有 属性 */ 
border-radius: Opx; 


} 
在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 11-6 所 示 。 
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(24 E:nth-of-type(n) 选 择 器 


细心 的 用 户 可 以 观察 例 11.4 和 例 11.5， 在 例 11.4 中 指定 第 3 个 dt 元 素 ， 理 想 状态 下 
应 该 更 改 “ 番 新 ”这 条 记录 ， 可 是 从 图 11-5 中 可 以 看 出 ， 更 改 的 是 “菠萝 ”这 条 记录 。 在 
例 11.5 中 指定 倒数 第 3 个 dt 元 素 ， 理 想 状 态 下 应 该 更 改 “ 番 葫 ”这 条 记录 的 样式 ， 可 是 
从 图 11-6 中 可 以 看 出 更 改 的 是 “猕猴 桃 ” 这 条 记录 的 样式 。 出 现 这 种 问题 的 原因 是 
E:nth-child(n) 和 E:nth-las-child(n) 选 择 器 在 计算 子 元 素 是 第 奇数 个 元 素 还 是 第 侦 数 个 元 素 
时 ， 是 连同 父 元 素 中 的 子 元 素 一 起 计算 的 。 以 div.demo dt:nth-child(3) 为 例 ， 它 并 不 是 只 针 
对 div 元 素 下 的 第 3 个 dt 元 素来 使 用 的 ， 这 还 包括 div 元 素 下 的 其 他 元 素 (例如 示例 中 的 dd 
元 素 )。 

如 果 要 避免 例 11.4 和 例 11.5 两 种 情况 的 出 现 ， 就 需要 使 用 到 其 他 的 选择 器 ， 即 nth- 
of-type 和 nth-last-of-type 选择 器 。E:nth-of-type(n) 选 择 器 选择 父 元 素 中 第 n 个 位 置 ， 且 匹配 
E 的 子 元 素 。 在 该 选择 器 中 ， 参 数 n 的 取 值 与 E:nth-child(m) 中 的 取 值 一 样 ， 可 以 是 数字 、 
关键 字 或 者 公式 等 。E:nth-of-type(n) 选 择 器 类 似 于 E:nth-child(n) 选 择 器 ， 不 同 的 是 它 只 计 
算 选择 器 中 指定 的 那个 元 素 。 

【 例 11.6】 
重新 更 改 例 11.4 中 的 代码 ， 通 过 E:nth-of-type(n) 选 择 器 实现 第 3 个 dt 元 素 中 字体 的 颜 
以 及 该 元 素 下 a 元 素 的 圆 角 边 框 、 背 景 颜色 和 字体 颜色 效果 。 样 式 代码 如 下 : 


.demo dt:nth-of-type (3){ 
color: #FF8040; 


色 


} 

.demo dt:nth-of-type(3) af 
background: lime; 
color: blue; 
-webkit-border-radius: Opx; 
—o-border-radius: Opx; 
border-radius: Opx; 


} 
在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 11-7 所 示 。 
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E:nth-last-of-type(n) 选 择 器 选择 父 元 素 中 倒数 第 n 个 位 置 ， 且 匹配 E 的 子 元 素 。 它 与 
Ei:nth-of-type(n) 选 择 器 的 语法 和 用 法 相同 ， 但 是 计算 顺序 与 E:nth-of-type(n) 选 择 器 相反 。 
【 例 11.7】 
新 更 改 例 11.5 中 的 代码 ， 通 过 E:nth-last-of-type(n) 选 择 器 实现 倒数 第 2 个 dt 元 素 及 
其 该 元 素 下 a 元 素 的 效果 。 样 式 如 下 : 


.demo dt:nth-last-of-type (2){ 
color: #FF8040; 


} 

.demo dt:nth-last-of-type(2) af 
background: lime; 
color: blue; 
—webkit-border-radius: Opx; /* Chrome 等 浏览 器 的 私有 属性 */ 
-o-border-radius: Opx; /* Opera 等 浏览 器 的 私有 属性 */ 
border-radius: Opx; 


} 
在 浏览 器 中 运行 本 例 的 代码 ， 观 察 效 果 ， 如 图 11-8 所 示 。 
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E:last-child 选择 器 选择 位 于 其 父 元 素 中 最 后 一 个 位 置 ， 且 匹配 E 的 子 元 素 。 它 要 比 前 
面 几 个 选择 器 简单 ， 直 接 使 用 即 可 ， 不 用 再 传 入 参数 。 

【 例 11.8】 

利用 前 面 示 例 的 页 面 为 元 素 设计 新 的 样式 ， 指 定 div.demo 中 最 后 一 个 dd 元 素 的 字体 
样式 、 字 体 颜 色 和 字体 大 小 。 

代码 如 下 : 


.demo dd:last-child{ 
font-family: "仿宋 "; /* 字 体 样式 为 仿宋 */ 
color: blue; /* 字 体 颜色 为 蓝 色 */ 
font-size: 14px; /* 字 体 大 小 为 14*/ 
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} 
在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 11-9 所 示 。 
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100 况 /50 卡 路 至 语 例 巡 生 系 C， 能 防止 便 稀 、 写 助演 化 和 黄 化 机 对 ， 这 些 禾 点 使 之 成 为 最 逐次 馆 的 闽 容 和 副 
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EE:first-of-type 选择 器 选择 在 其 父 元 素 中 匹配 E 的 第 一 个 同类 型 的 子 元 素 ， 该 选择 器 的 
功能 类 似 于 E:nth-of-type(1)。 
【 例 11.9】 
通过 E:first-of-type 选择 器 指定 div.demo 中 第 一 个 dd 元 素 的 字体 样式 、 颜 色 和 大 小 。 
代码 如 下 : 


.demo dd:first-of-type{ 
font-family: "仿宋 "; /* 字 体 样式 为 仿宋 */ 
color: blue; /* 字 体 颜 色 为 蓝 色 */ 
font-size: 14px; /* 字 体 大 小 为 14*/ 


} 
在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 11-10 所 示 。 
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水 果 之 一 ， 也 被 拿 来 作为 女性 三 肥 和 好 食材 。 


革 果 
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(12.8 其 他 选择 器 


除了 前 面 介绍 的 7 种 选择 器 外 ，CSS 3 中 新 增加 的 结构 化 伪 类 选择 器 还 包括 E:only- 


child、E:only-of-type 和 E:empty。 


@ 。 E:only-child: 选择 其 父 元 素 只 包含 一 个 子 元 素 ， 且 该 子 元 素 匹 配 卫 的 元 素 。 
@ 。 E:only-of-type: 选择 其 父 元 素 只 包含 一 个 同类 型 的 子 元 素 ， 且 该 子 元 素 匹 配 E 的 


@ 。 E:empty: 选择 匹配 E 的 元 素 ， 且 该 元 素 不 包含 子 节点 。 这 里 需要 注意 的 是 ， 文 
本 也 属于 节点 。 


里 提示 : E:only-child、E:only-of-type 和 E:empty 选择 器 的 使 用 效果 与 其 他 选择 器 
相似 ， 读 者 可 以 分 别 使 用 这 些 选择 器 设置 页 面 中 的 元 素 ， 这 里 不 再 具体 介绍 它们 的 使 用 


11.3 目标 伪 类 选择 器 


E:target 是 CSS 3 中 新 增加 的 目标 伪 类 选择 器 ， 它 选择 匹配 E 的 所 有 元 素 ， 且 匹配 元 
素 被 相关 URL 指向 。E:target 选择 器 是 动态 选择 器 ， 只 有 存在 URL 指向 该 匹配 元 素 时 ， 样 
式 效果 才 有 效 。 


【 例 11.10】 


例如 ， 在 前 面 示例 的 网 页 中 ，div.demo 元 素 下 的 a 元 素 都 有 一 个 id 属性 ， 其 属性 值 分 


别 为 first、second、third、fourth 等 。 在 样式 中 添加 atarget 的 样式 ， 代 码 如 下 : 
a:target{ 
background-color: blue; 


outline: 2px solid orange; 
color: white; 


在 浏览 器 中 输入 URL 网 址 ， 并 附加 “#third”， 以 锚 点 方式 链接 到 <a id=“third”>， 则 
该 元 素 理 解 显示 为 蓝 色 背 景 、 白 色 字体 ， 如 图 11-11 所 示 。 
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村 要 
100 克 /24 卡路里 柠 要 中 的 柠 横 酸 能 促进 热量 代谢 ， 而 且 它 的 维生素 C 含 量 是 水 果 中 的 令 佼 者 ,美白 效果 好 ， 热 里 又 低 ， 爱 美 
想 廊 的 女性 可 适量 食用 ， 但 洲 免 空 厦 吃 。 


回 
| 
哮 弟 位 号 旋 妾 8SSO 机 线 站 仿 


EE 
100 克 /32 卡 路 里 属于 酸性 水 果 ， 可 以 整 也 和 助 消化 ， 加 上 薄 欢 富 合 的 莅 素 能 有 益 体内 毒素 分 船 ， 促 进 排水 ， 排 腾 ， 所 以 ， 
那些 想 要 减肥 的 女性 ， 可 以 餐 后 适量 食用 。 
看 前 
100 克 135 卡 路 里 除了 含有 丰富 的 维生素 C、E 、K 外 ， 还 富 含 击 红 素 、 叶酸 、 类 胡 葛 卜 素 、 酌 酸 和 纤维 所 ， 是 最 热门 9 保健 
ee 也 被 拿 未 作为 女性 研 有 和 好 食材。 


Re 50 卡 路 里 苹果 富 含 果 胶 ， 可 以 帮助 肠 霄 蠕动 、 促 进 体内 毒素 的 排 世 ， 再 加 上 苹果 富 含 神 ， 热 量 不 高 ， 还 可 以 防止 稻 部 
 _、 水肿 ， 也 是 执 衣 于 三 肥 A9 女 性 首选 。 
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11.4 ”UI 元 素 状态 伪 类 选择 器 


元 素 状态 伪 类 是 也 是 CSS 3 中 新 增 的 全 新 类 型 选择 器 ， 其 中 UI 是 User Interface( 用 
户 界面 ) 的 简写 ，UI 设计 是 指 网 页 的 人 机 交互 、 操 作风 辑 、 界 面 美观 的 整体 设计 。 优 秀 的 
UI 设计 不 仅 是 让 网 页 更 具 个 性 和 品位 ， 还 要 让 网 页 操作 变 得 便利 和 简单 ， 充 分 体现 网 站 的 
定位 和 特点 。 
本 节 分 两 小 节 介绍 CSS 3 中 新 增 的 UI 元 素 状态 伪 类 选择 器 ， 它 们 分 别 是 E:enabled、 
E:disabled、E:checked 以 及 E::section 四 种 。 


(14.1 常用 的 选择 器 


E:enabled、E:disabled 和 E:checked 是 新 增 的 3 种 UI 元 素 伪 类 选择 器 。 其 中 ， 
E:enabled 用 于 选择 匹配 E 的 所 有 可 用 的 UI 元 素 ，E:disabled 用 于 选择 匹配 E 的 所 有 不 可 
用 UI 元 素 ，E:checked 用 于 选择 匹配 E 的 所 有 可 用 UI 元素。 

在 网 页 中 ，UI 元 素 一 般 是 指 包含 在 form 元 素 内 的 表单 元 素 ， 例 如 textarea 元 素 和 
input 元 素 。 

【 例 11.11】 

在 本 示例 中 通过 E:enabled、E:disabled 和 E:checked 元 素 设 置 input 元 素 在 不 同 状态 下 
的 效果 。 实 现 步骤 如 下 。 

国 国 01] 向 HTML 网 页 的 fom 元 素 中 添加 一 个 4 行 两 列 的 表格 。 内 容 如 下 : 

<form id="forml" action="#" method="get"> 

<table width="90%" height="150px" align="center"” border="1" 
bordercolor="#CCCCCC" cellpadding="0" cellspacing="0"> 
<tr> 


<td align="right" width="20g%"> 登 录 名 : </td> 
本 
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<input name="loginname" type="text" value="Hello" disabled /> 
</td> 
SET 
< 厂区 
<td align="right"> 真 实 姓名 : </td> 
<td><input name="realname" type="text" /></td> 
过 人 ETFE> 
KE> 
<td align="right"> 爱 好 : </td> 
<td> 
<input name="lovel" value="sing" type="checkbox" /> 唱歌 
<input name="love2" value="dang" type="checkbox" /> 跳舞 
<input name="love3" value="hua" type="checkbox" /> 男 画 
</td> 
WEE> 
<tr><td></td><td><input type="button" value=" 提 交 "/></td></tr> 
</table> 
</form> 


国 轨 02| 指定 text 类 型 的 input 元 素 可 用 时 的 边框 样式 ， 内 容 如 下 : 


input [type="text"] :enabled{ 
border: 2px solid blue; 
} 


国 归 03] 指定 text 类 型 的 input 元 素 不 可 用 时 的 边框 样式 ， 内 容 如 下 : 


input [type="text"] :disabled{ 
border: 2px solid red; 
} 


国 加 04|] 指定 checkbox 类 型 的 input 元素 选中 时 边框 边缘 的 外 围 样式 ， 内 容 如 下 : 


input [type="checkbox"] :checked{ 
outline: 3px dotted #0080FF; 
} 


国 轨 05】 在 浏览 器 中 运行 本 示例 的 页 面 查看 效果 ， 初 始 效 果 如 图 11-12 所 示 。 
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图 11-12 常用 的 UI 元 素 状 态 伪 类 选择 器 


国 轨 06 | 选中 图 中 与 “爱好 ”有 关 的 复 选 框 ， 选 中 时 的 效果 如 图 11-13 所 示 。 
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11-13 ”选中 复 选 框 时 的 效果 


(142 E::selection 选 择 器 


E::selection 选择 器 用 于 匹配 卫 元 素 中 被 用 户 选 中 或 处 于 高 亮 状态 的 部 分 。 
【 例 11.12】 
向 页 面 中 添加 一 首 歌 ， 包 括 歌 名 和 歌曲 两 部 分 ， 实 现 歌 词 内 容 选中 时 的 效果 。 实 现 步 
又 如 下 。 
艾 玉 01| 向 页 面 中 添加 歌曲 名 称 和 歌词 内 容 ， 页 面 代码 如 下 : 
<header><h1> 特 别 的 爱 给 特别 的 你 </h1></header> 
<p> 没 有 承诺 却 被 你 抓 得 更 紧 <br/> 没 有 了 你 我 的 世界 十 下 个 不 停 <br/> 我 付出 一 生 的 时 间 
<br/> 想 要 忘记 你 <br/> 但 是 回忆 回忆 回忆 <bzr/> 从 我 心里 跳出 来 拥抱 你 <bz/> 特 别 的 爱 给 特别 的 
你 <br/> 我 的 寂寞 逃 不 过 你 的 眼睛 <br/> 特 别 的 爱 给 特别 的 你 <br/> 你 让 我 越 来 越 不 相信 自己 </p> 
为 p 元 素 添加 样式 代码 ， 用 户 选中 p 元 素 中 的 内 容 时 设置 背景 颜色 为 绿 
色 ， 字 体 颜 色 为 蓝 色 。 样 式 如 下 : 
p::selection{ 
background-color: green; 


color: blue; 


} 
鸭 别 03| 在 浏览 器 中 运行 本 次 示例 的 代码 进行 查看 ， 选 中 歌词 内 容 时 的 效果 如 
图 11-14 所 示 。 
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11.5 ”否定 伪 类 选择 器 


E:not(s) 是 CSS 3 中 新 增 的 一 种 否定 伪 类 选择 器 类 型 ， 该 选择 器 选择 匹配 E 的 所 有 元 
素 ， 且 过 滤 掉 匹配 s 选择 符 的 任意 元 素 。 

在 E:not(s) 选 择 器 中 ， 参 数 s 只 是 一 个 简单 结构 的 选择 器 ， 不 能 使 用 复合 选择 器 。 
E:not(s) 选 择 器 相当 于 二 次 过 滤 ， 适 合用 于 精确 地 选择 元 素 。 

【 例 11.13】 

利用 例 11.11 的 效果 页 面 练习 E:not(s) 选 择 器 的 使 用 ， 对 form 中 所 有 input 元 素 指定 边 
框 边 缘 的 外 围 样 式 ， 但 是 不 需要 button 起 变化 。 

代码 如 下 : 


input:not([type="button"]) { 
outline: lpx solid blue; 


} 
在 浏览 器 中 运行 上 述 代 码 ， 查 看 效果 ， 如 图 11-15 所 示 。 
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11.6 ”通用 兄弟 选择 器 


E~F 是 CSS 3 中 新 增 的 通用 兄弟 选择 器 类 型 ， 它 用 于 选择 匹配 下 的 所 有 元 素 ， 且 匹配 
元 素 位 于 匹配 E 的 元 素 后 面 。 需 要 注意 的 是 ， 在 DOM 结构 树 中 ，E 和 下 所 匹配 的 元 素 应 
该 位 于 同一 级 结构 上 。 

【 例 11.14】 

在 某 个 网 页 中 包含 一 个 div 元 素 ， 该 元 素 中 包含 两 个 p 元 素 和 一 个 header 元 素 ， 其 中 
header 元 素 位 于 两 个 p 元 素 之 间 。 

页 面 代码 如 下 : 

<div> 


<p>gnbsp; gnbsp; &nbsp; &nbsp; gnbsp; gnbsp; 寒 夜 的 孤独 ， 不 是 没有 人 关心 没有 人 
爱 ， 只 是 我 喜欢 的 那个 人 她 不 在 。 爱 你 就 像 呼 吸 一 样 理所当然 ， 我 可 以 屏 住 呼吸 ， 却 不 能 停止 爱 
人 闭 上 眼 ， 以 为 能 忘记 ， 但 流下 的 眼泪 ， 却 没有 骗 到 自己 。 一 个 人 一 生 中 究竟 要 有 多 少 个 ， 才 愿 
停留 下 脚步 …… 


</p> 

<header id="myfirst"><h1> 北 国 的 思念 </h1></header> 

<p>gnbsp; gnbsp; &gnbsp; &gnbsp; gnbsp; gnbsp; 寒 夜 思念 如 爽 ， 在 这 寂静 而 又 漫长 的 塞 夜 
里 莹 延 开 来 。 寂 宽带 着 文字 ， 直 接 扎 入 自己 孤独 的 灵魂 。 我 知道 ， 此 生 的 寂寞 ， 如 一 缕 绵 长 的 丝 
纱 ， 在 空气 里 际 荡 ， 草 延 。 好 想 亲 近 你 ， 感 受 你 温暖 的 体温 ， 感 到 你 触摸 文字 的 喧哗 ， 我 知道 ， 你 
喜欢 我 的 文字 。 狂 如 这 不 寞 一 样 ， 如 痴 如 醉 。 可 是 ， 想 起 往日 的 年 华 已 不 在 ， 草 藤 燕 莎 ， 大 雁 习 
去 ， 往 事 一 如 飞鸿 ， 让 人 不 敢 接近 。 也 许 ， 是 习惯 了 疲 寞 中 独自 低 吟 。 如 丝 般 寂 窗 ， 感 受 孤 独 带 来 
的 斑 驭 风景 ， 以 及 倾听 寂寞 中 文字 的 声音 。 

</p> 
</div> 


通过 使 用 header~p 兄弟 选择 器 为 上 述 代 码 中 的 p 元 素 指 定 字体 颜色 和 大 小 ，header~p 
表示 只 为 header 元 素 之 后 的 p 元 素 添加 样式 。 
内 容 如 下 : 


header~p{ 
font-size: 14px; 
color: #007DFB; 


在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 11-16 所 示 。 
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霖 夜 的 牟 委 ， 不 是 没有 人 关心 没有 人 受 ， 只 是 我 二 欢 的 那个 人 她 不 在 。 爱 你 略 像 用 吸 一 样 理所当然 ， 我 可 以 屏 住 呼吸 ， 却 不 能 停止 爱 
你 。 闲 上 眼 ， 以 为 能 忘记 ,但 流下 的 眼泪 ， 却 没有 注 到 自己 > 一 个 人 一 生 中 究 商 要 有 多 少 个 ， 才 厢 意 停留 下 稳步 
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， 直 接 扎 入 自己 孤独 的 灵 讽 。 我 知道 ， 此 生 的 
明星 的 体温 ps 误 措 文字 的 0o 叶 ， 我 知道 ， 

已 不 在 ， 雁 飞 去 , 往事 和 
要 匠 独 带 来 的 斑 虹 a, 以 及 贪 听 家 页 中 文字 的 南 


es 
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11.7 ”实战 一 一 设计 直观 的 表单 页 面 


在 本 章 之 前 ， 已 经 介绍 过 CSS 3 中 新 增 的 一 些 选择 器 ， 例 如 属性 选择 器 、UI 元 素 伪 类 
选择 器 、 目 标 伪 类 选择 器 和 否定 伪 类 选择 器 等 。 本 节 实 战 将 前 面 的 内 容 结合 起 来 ， 设 计 出 
一 个 直观 的 表单 页 面 。 

设计 表单 页 面 时 的 主要 步骤 如 下 。 

区 更 01| 向 页 面 中 添加 form 表单 元 素 ， 该 元 素 包含 一 个 7 行 两 列 的 表格 。 页 面 代 码 

如 下 : 


<form id="myform" action="#" method="post"> 
<table width="80%" align="center"> 
<tr> 
<td> 姓 名 : </td><td><input type="text" required/></td> 
SHEr> 
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<tr> 
<td> 年 龄 : </td><td><input type="number" value="18" max="99" /> 
<HEE> 
<t> 
<td> 户 籍 所 在 地 : </td> 
<td><input type="text"” value=" 河 南 郑州 " disabled /></td> 
<HEE> 
tr> 
<td> 兴 趣 : </td> 
<td><input type="checkbox" value="chang" /> 唱歌 
<input type="checkbox" value="playbass" /> 打 篮 球 
<input type="checkbox" value="pa" /> 怜 山 
</td> 
</tr> 
民 E 主 > 
<td> 性 别 : </td> 
<td><input type="radio" name="sex" value="1" checked /> 男 
<input type="radio" name="sex" value="0" /> 女 
</td> 
< Er 
<tr> 
<td> 备 注 说 明 : </tq> 
<td><textarea row="20" cols="20"></textarea></td> 


</tr> 
<tr> 
<td>gnbsp;</td><td><input type="button" value=" 提 交 " /></td> 
</tr> 
</table> 
</form> 
国 归 02| 运行 上 述 页 面 ， 查 看 效果 ， 界 面 初始 效果 如 图 11-17 所 示 。 
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图 11-17 表单 初始 效果 


从 图 11-17 中 可 以 看 出 ， 本 节 实 战 设计 的 表单 页 面 非常 简单 ， 只 包含 姓名 、 年 龄 、 户 
籍 所 在 地 、 兴 趣 、 性 别 和 备注 说 明 人 信息。 但是， 该 图 中 显示 的 界面 不 是 很 美观 ， 例 如 左 侧 
列 的 内 容 与 右 侧 列 的 内 容 空 白 内 容 过 大 。 

为 表单 中 的 元 素 添 加 样式 ， 首 先 为 表格 的 左 侧 单 元 格 添加 样式 ， 指 定单 元 
格 的 背景 颜色 和 字体 对 齐 方式 ， 以 及 单元 格 内 容 选 中 时 的 背景 色 。 样 式 如 下 : 


步 又 


NN 


tr>td:first-of-type{ 
width: 30%; 
text-align: right; /* 字体 靠 右 */ 
background-color: #FF7837; /* 背景 颜色 */ 
3 


tr>td:first-of-type::selection{ 
background-color: green; 
color: white; 


} 
接着 为 表格 的 右 侧 单元 格 添加 样式 ， 指 定单 元 格 的 背景 颜色 。 代 码 如 下 : 


tr>td:last-childf{ 
background-color: #FFAD86; 
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} 
国 05] 为 表单 中 type 类 型 是 text 的 input 元 素 指定 圆 角 边框 ， 并 且 设置 元 素 不 可 
用 时 的 样式 。 代 码 如 下 : 


input [type="text"] { 
border-radius: 5px; 


} 


input [type="text"] :disabled{ 
color: red; 
border: lpx solid red; 


} 
国 妇 06|] 为 表单 中 type 类 型 是 checkbox 的 input 元 素 分 别 指定 奇数 个 和 偶数 个 时 边 
框 边缘 的 外 围 样式 。 代 码 如 下 : 


input [type="checkbox"] :nth-of-type (odd) { 
outline: lpx dotted blue; 
} 


input [type="checkbox"] :nth-of-type (even) { 
outline: 2px dotted blue; 
1 


国 玫 07] 为 表单 中 type 类 型 是 radio 的 input 元 素 指定 选中 时 边框 边缘 的 外 围 样式 。 
代码 如 下 : 


input [type="radio"] :checked{ 
outline: 2px outset red; 


} 
通过 :before 选择 器 在 表单 之 前 添加 “设计 表单 页 面 ” 文本 ， 并 且 指 定 该 广 
本 的 字体 大 小 和 粗细 程度 。 代 码 如 下 : 


table:before{ 
content : "设计 表单 页 面 "; 
font-size: 24px; GD 
font-weight: bold; | 


11-18 ”美化 表单 后 的 效果 


区 国 10] 选择 表单 左 侧 单 元 格 的 内 容 ， 观 察 选中 文本 的 背景 颜色 ， 如 图 11-19 所 示 。 


11-19 选择 左 侧 单元 格 的 内 容 


人 
问题 ， 例 如 编码 格式 、 样 式 和 结构 等 。 设 计 表 单 时 应 大 气 、 不 应 捉襟见肘 ， 本 节 只 是 为 
了 突出 本 章 重点 而 设计 出 一 个 简单 的 表单 ， 读 者 当然 可 以 设计 出 更 漂亮 的 页 面 。 


11.8 本 章 习题 
1. 填空 是 


(1) 选择 器 是 指 选 择 匹配 EE 的 元 素 ， 且 该 元 素 定义 了 att 属性 ，att 属性 值 
包含 前 缓 为 value 的 子 字 符 串 。 

(2) 选择 器 用 于 匹配 文本 的 根 元 素 。 

(3) 将 E:nth-child(n) 选 择 器 的 参数 n 设置 为 时 ， 表 示 选 择 所 有 在 其 父 元 素 


De 
中 奇数 个 位 置 的 匹配 下 的 子 元 素 . = 
(4) 选择 器 选择 位 于 其 父 元 素 中 最 后 一 个 位 置 ， 且 匹配 卫 的 子 元 素 。 章 
(5) CSS 3 中 新 增 的 目标 伪 类 选择 器 是 指 8 
2. 选择 题 新 
(1) CSS 3 中 新 增加 的 属性 选择 器 不 包括 辣 
A. El[att=value] B. Elatt^=value] 六 
C. El[att$=value] D. El[att*=value] 器 
0) 选择 器 用 于 匹配 同类 型 中 第 个 同 级 兄弟 元 素 。 
A. E:nth-child(n) B. E:nth-last-child(n) 
C. E:nth-of-type(n) D. E:nth-last-of-type(n) 
(3) CSS 3 新 增 的 选择 器 选择 在 其 父 元 素 中 匹配 EE 的 第 一 个 同类 型 的 子 元 
素 ， 其 功能 类 似 于 E:nth-of-type(])。 
A. E:nth-child(1) B. E:first-of-type 
C. E:only-child D. E:only-of-type 
(4) 在 CSS 3 新 增 的 UI 元 素 状态 伪 类 选择 器 中 ， 用 于 选择 匹配 E 的 所 有 
可 用 的 UI 元 素 。 
A. E:enabled B. E:disabled 
C. E:checked D. E::selection 
(5) 表示 否定 伪 类 选择 器 。 
A. E::selection B. E~F 
C. E:root D. E:not(s) 


3. 上 机 练习 


读者 需要 根据 本 章 介绍 的 选择 器 设计 层次 化 的 数据 表格 ， 表 格 的 初始 效果 如 图 11-20 
所 示 。 在 图 11-20 中 ， 显 示 了 奇数 行 (不 包括 头 部 标题 部 分 ) 和 偶数 行 的 背景 颜色 ， 并 且 显 
示 了 和 鼠标 悬浮 至 奇数 行 时 的 效果 。 奇 数 行 和 偶数 行 悬 浮 时 的 背景 颜色 不 一 样 ， 如 图 11-21 
所 示 为 悬浮 到 偶数 行 时 的 效果 。 


[= [© | 
也 省 数据 泰 属 x 
CD file///D:/htmls/selector/work/test.html 窜 | 于 
使 用 CSS 3 新 增 选 择 器 设计 数据 表格 
手 名 天 部 排名 ”学校 六 各 。 语文 成 绪 。 。” 教 字 成 策 。 英语 成 将 物 悍 成 绩 。 化 学 成 绩 。 政治 成 绩 。 总 分 
Ei 1 s6 100 98 go loo 81 
颗 和 2 a ss b 95 as 100 oi 70 71 
许 还 3 15 93 95 98 98 99 95 578 
4 于 2 59 100 95 100 3 4 
程 所 乐 “SS 3 52 94 97 a0 98 aa 559 
3 小 6 6 2 95 99 EE 80 87 S41 


11-20 ”表格 的 初始 效果 


rm 5 与 CSS 3 网 页 设计 入 门 与 提高 


= = Auvewvvurioxo 


© |B file//DY/htmls/selector/work/test html 
使 用 CSS 3 新 增 选择 器 设计 数据 表格 
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CSS 3 页 面 美 化 样式 


CSS 作为 样式 工具 ， 为 页 面 提供 了 美化 样式 工具 ， 包 括 文本 样式 、 字 体 样 
式 、 边 框 样式 和 背景 样式 等 。 本 章 介 绍 CSS 新 增 的 页 面 美化 样式 。 


本 章 学 习 目 标 : 


[4 


了 解 页 面 美化 的 常用 样式 
掌握 新 增 文本 样式 的 用 法 
掌握 新 增 字 体 样式 的 用 法 
掌握 新 增 背景 样式 的 用 法 
掌握 新 增 边框 样式 的 用 法 
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1412.1. CSS3 页 面 美 化 


页 面 的 美化 样式 体现 在 页 面 的 文本 样式 、 字 体 样式 、 背 景 样式 和 边框 样式 方面 。 在 
CSS 3 新 增 的 样式 中 ， 页 面 的 美化 主要 体现 在 如 下 几 点 : 
ee 文本 方面 新 增 属性 主要 表现 在 标点 、 换 行 和 对 齐 的 处 理 ， 添 加 了 文字 的 轮廓 样 
式 、 阴 影 样式 、 前 景色 等 样式 。 
e@ ”字体 方面 ，CSS 3 支持 用 户 使 用 自 定义 的 字体 文件 ， 而 并 不 完全 依赖 于 用 户 客户 
端的 字体 文件 。 
@ 背景 方面 ，CSS 3 新 增加 了 与 背景 的 尺寸 、 定 位 和 区 域 相关 的 属性 。 
e@ ”边框 方面 新 增 了 圆 角 边框 、 边 框 背景 图 片 和 阴影 效果 。 
上 述 这 些 美 化 效果 体现 在 新 增 属性 方面 ， 在 CSS 3 中 通过 新 增 属性 来 美化 页 面 ， 使 用 
简单 、 效 果 明 显 。 以 下 分 别 从 文本 、 字 体 、 背 景 和 边框 这 几 个 方面 来 介绍 CSS 3 中 的 页 面 
美化 。 


12.2 文本 样式 


CSS 3 在 不 断 地 更 新 、 强 大 ， 而 当前 浏览 器 的 换代 跟 不 上 CSS 的 发 展 ， 因 此 不 少 CSS 
3 的 新 增 样式 无 法 被 支持 。 本 节 介 绍 CSS 3 的 新 增 文本 样式 ， 包 括 被 支持 的 和 不 被 支持 的 
样式 。 


(22.1 新 增 样式 


CSS 3 新 增 样 式 都 通过 属性 方式 来 呈现 ， 对 于 新 增 的 文本 样式 ， 主 要 体现 在 如 表 12-1 
所 示 的 这 些 属 性 中 。 


表 12-1 CSS 3 新 增 的 文本 属性 


属 性 
hanging-punctuation 
_punctuation-trim 


描 述 
规定 标点 字符 是 否 位 于 线 框 之 外 
规定 是 否 对 标点 字符 进行 修剪 


text-alien-last 


设置 如 何 对 齐 最 后 一 行 或 紧 挨 着 强制 换行 符 之 前 的 行 


text-emphasis 向 元 素 的 文本 应 用 重点 标记 以 及 重点 标记 的 前 景色 
text-justify 规定 当 text-align 设置 为 justify 时 所 使 用 的 对 齐 方法 
text-outline 规定 文本 的 轮廓 
text-overflow 规定 当 文 本 溢出 包含 元 素 时 发 生 的 事情 
text-shadow 向 文本 添加 阴影 
text-wrap 规定 文本 的 换行 规则 
word-break 规定 非 中 日 韩文 本 的 换行 规则 
word-wrap 允许 对 长 的 不 可 分 割 的 单词 进行 分 割 并 换行 到 下 一 行 
A 
St 
) WE 358 


上 述 文本 属性 并 不 是 所 有 的 浏览 器 都 支持 ， 其 中 text-shadow 
支持 的 浏览 器 有 Internet Explorer 10、Firefox、Chrome、Safari 
Explorer 9 以 及 更 早 的 版 本 不 支持 这 些 属性 。 


(人 之: 新 增 样式 的 用 法 

表 12-1 列举 了 新 增 的 文本 属性 ， 本 节 详 细 介 绍 这 些 属性 的 用 
当前 主流 浏览 器 支持 ， 因 此 本 节 重 点 介绍 浏览 器 支持 的 属性 。 

1. text-shadow 属 性 


text-shadow 属性 是 阴影 样式 的 属性 ， 包 含 4 个 构成 : 水 平 阴 
模糊 距离 和 阴影 颜色 ， 如 表 12-2 所 示 。 


表 12-2 ”text-shadow 属性 构成 


属 性 说 明 
h-shadow 必需 。 水 平 阴影 的 位 置 。 允 许 负 值 
V-shadow 必需 。 垂 直 阴 影 的 位 置 。 人 允许 负 值 
blur 可 选 。 模 糊 的 距离 
color 可 选 。 阴 影 的 颜色 


定义 文本 阴影 的 格式 如 下 : 
text-shadow: h-shadow v-shadow blur color; 


【 例 12.1】 
定义 3 个 不 同 的 div 样式 ， 分 别 使 用 不 同 的 阴影 参数 ， 查 看 
代码 如 下 所 示 : 


<style type="text/css"> 
dy 
width: 150px; 
float: left; 
color: #f00; 
| 
“iw1 4 
font-size: xx-large; 
text-shadow: 5px Spx lpx #ff00dc; 
h 
-v2 
font-size: xx-large; 
text-shadow: 10px 1l0px 2px #ff00dc; 
} 
div3 1 
font-size: xx-large; 
text-shadow: 10px 10px 3px #ff00dc; 
} 
</style> 


属性 和 word-wrap 属性 可 
以 及 Opera。 而 Interet 


法 。 由 于 部 分 属性 并 不 被 


影 位 置 、 垂 直 阴 影 位 置 、 


字体 的 阴影 效果 ， 其 样式 
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向 页 面 中 添加 3 个 div， 分 别 使 用 上 述 3 种 样式 ， 执 行 效果 如 图 12-1 所 示 。 


1: localhost8357/Hemlpag x 是 


€ © Blocalhost:8357/HtmlPagel.html 
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12-1 文本 阴影 


2. word-wrap 属 性 


word-wrap 属性 控制 文本 的 换行 样式 ， 所 有 主流 浏览 器 都 支持 word-wrap 属性 。 该 属 
性 的 语法 格式 如 下 所 示 : 


word-wrap: normallbreak-word; 


word-wrap 属性 有 两 个 参数 ， 对 其 说 明 如 下 所 示 。 
@ normal: 只 在 允许 的 断 字 点 换行 (浏览 器 保持 默认 处 理 )。 
@ break-word: 在 长 单词 或 URL 地 址 内 部 进行 换行 。 
【 例 12.2】 
定义 两 个 不 同 的 div 样式 ， 分 别 使 用 相同 的 宽度 和 不 同 的 word-wrap 属性 。 在 页 面 中 
添加 两 个 div， 使 用 这 两 种 样式 。 两 个 div 使 用 相同 长 度 的 文本 ,分 别 查 看 文本 中 间 没 有 空 
格 和 换行 的 情况 、 文 本 中 间 有 空格 和 换行 的 情况 ， 操 作 步 又 如 下 。 
妇 池 01| 首先 定义 div 样式 ， 定 义 div 共有 属性 ， 设 置 div 宽度 和 字体 颜色 ， 定 义 两 
个 div 样式 使 用 不 同 的 word-wrap 属性 ， 代 码 如 下 : 
<style type="text/css"> 
div { 
width: 150px; 


float: left; 
color: #f£f00; 


. 

-divl { 
font-size: xx-large; 
word-wrap: break-word; 

! 

“diy2 
font-size: xx-large; 
word-wrap: normal; 

0 

</style> 


国 轨 02| 向 页 面 中 添加 两 个 div， 使 用 相同 长 度 的 文本 ， 文 本 中 间 没 有 空格 和 换行 ， 
代码 如 下 : 


<div class="divl">abcdefghijkl</div> 
<div class="div2">ABCDEFGHIJKL</div> 


1 于 第 一 个 div 允许 在 文本 中 间 换 行 ， 因 此 在 长 度 不 够 的 情况 下 文本 将 执行 换行 ， 而 


N 


不 需要 考虑 文本 中 间 是 否 有 空格 或 换行 符 。 第 二 个 div 只 允许 在 空格 或 换行 符 处 换行 ， 因 
此 即使 空间 不 足 ， 也 不 能 够 换行 。 其 执行 效果 如 图 12-2 所 示 。 
区 于 03| 修改 步骤 02 中 的 代码 ， 为 两 个 div 中 的 文本 添加 空格 ， 代 码 如 下 : 


<div class="divl">abcdef ghijkl</div> 
<div class="div2">ABCDEF GHIJKL</div> 


对 于 有 了 空格 的 文本 ， 无 论 是 否定 义 了 允许 文本 中 间 换 行 ， 只 要 区 域内 的 文本 长 度 大 
于 该 区 域 的 宽度 ， 浏 览 器 都 将 根据 空格 或 换行 符 进行 换行 。 其 执行 效果 如 图 12-3 所 示 。 


卡 阐 六 半 到 吧 & SSO 直线 投 鲍 


lay 


ke 


| localhost8357/Htmlpao x WE 
| i © 口 localhost8357/HtmlPag 空 三 


abcdef ”ABCDEF 


| localhost:8357/Htmlpag x 、 
€ 3 GDIocalhost8357/HtmlPage2j 安 


| 
abcdefghi ABCDEFGHIJKL | 


jkl ghijkl ~ GHIJKL 
图 12-2 没有 断 字 点 的 换行 图 12-3 有 断 字 点 的 换行 


3. hanging-punctuation 属 性 

hanging-punctuation 属性 规定 把 标点 符号 放 在 文本 整 行 的 开头 还 是 结尾 的 行 框 之 外 。 
目前 主流 浏览 器 都 不 支持 hanging-punctuation 属性 ， 其 使 用 格式 如 下 : 
hanging-punctuation: nonelfirstllastlallow-end|force-end; 
上 述 代码 中 none、first、last、allow-end、force-end 为 hanging-punctuation 属性 的 可 取 
其 部 分 属性 值 的 含义 如 下 。 
@ none: 不 在 文本 整 行 的 开头 还 是 结尾 的 行 框 之 外 放置 标记 符号 。 
e@ first: 标点 附着 在 首 行 开 始 边缘 之 外 。 
@ last: 标点 附着 在 首 行 结尾 边缘 之 外 。 
4. punctuation-trim 属 性 
目前 主流 浏览 器 都 不 支持 punctuation-trim 属性 。punctuation-trim 属性 规定 如 果 标 点 位 
于 行 开 头 或 结尾 处 ， 或 者 临近 另 一 个 全 角 标 点 符号 ， 是 否 对 标点 符号 进行 修剪 。 其 语法 如 
下 所 示 : 

punctuation-trim: nonelstartlendlallow-endladjacent; 

上 述 代 码 中 none、start、end、allow-end、adjacent 为 punctuation-trim 属性 的 可 取 值 ， 
其 部 分 属性 值 的 含义 如 下 。 

@ ”none: 不 修剪 开启 或 闭合 标点 符号 。 

@ start: 修剪 每 行 结 尾 的 开启 标点 符号 。 

@ end: 修剪 每 行 结尾 的 闭合 标点 符号 。 

S，text-emphasis 属 性 a && 

text-emphasis 属性 是 简写 属性 ， 用 于 在 一 个 声明 中 设置 text-emphasis-style 和 text- 


应 
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emphasis-color。 其 语法 格式 如 下 : 


text-emphasis: text-emphasis-style text-emphasis-color; 


上 述 代码 中 ， 对 text-emphasis-style 属性 和 text-emphasis-color 属性 的 解释 如 下 。 

®@ text-emphasis-style: 向 元 素 的 文本 应 用 重点 标记 。 

@ text-emphasis-color: 定义 重点 标记 的 前 景色 。 

目前 主流 浏览 器 都 不 支持 text-emphasis 属性 。 

6.，text-justify 属 性 

text-justify 属性 改变 单词 间 的 间隔 ， 目 前 只 有 Intemet Explorer 支持 text-justify 属性 。 
text-justify 属性 规定 当 text-align 被 设置 为 text-align 时 的 齐 行 方法 。 该 属性 规定 如 何 对 行文 
本 进行 对 齐 和 分 隔 。 其 语法 如 下 : 


text-justify: autolinter-word|inter-ideograph|inter-cluster 
ldistribute|kashidaltrim; 


对 上 述 代 码 解 释 如 下 。 

@ auto: 浏览 器 决定 齐 行 算法 。 

none: 禁用 齐 行 。 

inter-word: 增加 /减少 单词 间 的 间隔 。 

inter-ideograph: 用 表意 文本 来 排 齐 内 容 。 

inter-cluster: 只 对 不 包含 内 部 单词 间隔 的 内 容 ( 比 如 亚洲 语系 ) 进 行 排 齐 。 
distribute: 类 似 报 纸 版 面 ， 除 了 在 东亚 语系 中 最 后 一 行 是 不 齐 行 的 。 
kashida: 通过 拉 伸 字符 来 排 齐 内 容 。 

7.，text-outline 属 性 


text-outline 属性 规定 文本 轮廓 ， 所 有 主流 浏览 器 都 不 支持 text-outline 属性 。 其 语法 格 
式 如 下 所 示 : 

text-outline: thickness blur color; 

对 上 述 代码 解释 如 下 。 

@ ”thickness: 必需 。 轮廓 的 粗细 。 

@ blur: 可 选 。 轮廓 的 模糊 半径 。 

@ color: 必需 。 轮 廓 的 颜色 。 

8. text-overflow 属 性 

text-overflow 属性 规定 当 文 本 溢出 包含 元 素 时 发 生 的 事情 。 所 有 主流 浏览 器 都 支持 
text-overflow 属性 。 
其 语法 格式 如 下 : 
text-overflow: cliplellipsis|string; 


对 上 述 代码 解释 如 下 。 


@ clip: 修 前 文本。 

@ ellipsis: 显示 省 略 符号 来 代表 被 修剪 的 文本 。 

@ string: 使 用 给 定 的 字符 串 来 代表 被 修剪 的 文本 。 
9.，text-wrap 属 性 


text-wrap 属性 规定 文本 的 换行 ( 折 行 ) 规 则 。 目 前 主流 浏览 器 都 不 支持 text-wrap 属性 。 
其 语法 格式 如 下 所 示 : 
text-wrap: normallnonelunrestricted|suppress; 


对 上 述 代 码 解 释 如 下 。 
@ normal: 只 在 允许 的 换行 点 进行 换行 。 
none: 不 换行 。 元 素 无 法 容纳 的 文本 会 溢出 。 
unrestricted: 在 任意 两 个 字符 间 换 行 。 
suppress: 压缩 元 素 中 的 换行 。 浏 览 器 只 在 行 中 没有 其 他 有 效 换行 点 时 换行 。 
10. word-break 属 性 
通过 使 用 word-break 属性 ， 可 以 让 浏览 器 实现 在 任意 位 置 的 换行 。 几 乎 所 有 主流 浏览 
器 都 支持 word-break 属性 。 
word-break 属性 规定 自动 换行 的 处 理 方法 ， 其 语法 格式 如 下 所 示 : 
word-break: normallbreak-all|keep-all; 


对 上 述 代码 解释 如 下 。 

e@ normal: 使 用 浏览 器 默认 的 换行 规则 。 

@ break-all: 允许 在 单词 内 换行 。 

@ ”keep-all: 只 能 在 半角 空格 或 连 字 符 处 换行 。 
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12.3 字体 样式 


在 CSS 3 之 前 ，Web 设计 师 必 须 使 用 已 在 用 户 计算 机 上 安装 好 的 字体 。 通 过 CSS 3， 
Web 设计 师 可 以 使 用 任意 字体 。 

字体 的 显示 是 依赖 于 用 户 浏 览 器 的 ， 只 有 用 户 浏览 器 安装 过 的 字体 才能 够 被 正常 显 
示 。CSS 3 允许 将 Web 设计 师 自 定义 的 (或 找到 、 购 买 到 的 ) 字 体 存 放 到 Web 服务 器 上 ， 它 
会 在 需要 时 被 自动 下 载 到 用 户 的 计算 机 上 。 

自 定义 的 字体 是 在 CSS 3 的 @font-face 选择 器 中 定义 的 ，Firefox、Chrome、Safari 以 
及 Opera 浏览 器 支持 .ttf(True Type Fonts) 和 .otf(OpenType Fonts) 类 型 的 字体 。 

Internet Explorer 9 及 以 上 版 本 支持 新 的 @font-face 规则 ， 但 是 仅 支 持 .eot 类 型 的 字体 
(Embedded OpenType)。 

在 新 的 @font-face 规则 中 ， 必 须 首先 定义 字体 的 名 称 (例如 myFirstFont)， 然 后 指向 该 
字体 文件 。 


363 ， 
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【 例 12.3】 

如 需 为 HTML 元 素 使 用 字体 ， 通 过 font-family 属性 来 引用 字体 的 名 称 (myFirstFont)， 
步骤 如 下 。 

步 台 [ 友 | 首先 将 该 字体 在 @font-face 选择 器 中 定义 ， 代 码 如 下 : 

@font-face 


和 
font-family: myFirstFont; 
src: url('Sansation Light.ttf'")， 
url('Sansation Light.eot'); 


} 


上 述 代 码 中 ，font-family 属性 定义 新 字体 的 名 称 ; src 属性 定义 新 字体 文件 的 地 址 。 
Windows 目前 所 支持 的 字体 文件 为 ttf、.fon、:ttc 格式 。 

接着 在 其 他 选择 器 下 使 用 新 建 字体 ， 如 在 div 下 使 用 该 字体 ， 代 码 如 下 : 

div 

{ 

font-family: myFirstFont; 

} 

@font-face 选择 器 下 除了 可 以 定义 新 建 字体 的 名 称 和 文件 地 址 ， 还 可 以 定义 字体 属 
性 ， 如 字体 颜色 、 大 小 和 样式 等 ， 如 下 所 示 : 

@font-face 
font-family: myFirstFont; 
src: url('Sansation Bold.ttf"'), 


url('Sansation Bold.eot'); 
font-weight: bold; 


上 述 代 码 使 用 了 myFirstFont 字体 ， 但 在 定义 该 字体 时 使 用 了 加 粗 属性 ， 该 字体 在 加 
载 时 将 会 显示 加 粗 字 体 。 
于 @font-face 选择 器 可 以 定义 字体 的 基础 样式 (颜色 、 大 小 等 属性 )， 因 此 可 将 页 面 
中 有 着 相同 样式 的 文本 的 样式 定义 为 @font-face， 并 在 元 素 中 引用 。@font-face 可 定义 的 样 
式 属性 如 表 12-3 所 示 。 

【 例 12.4】 

向 浏览 器 中 添加 行书 字体 ， 地 址 为 Inages/xingshu.otf， 在 div 中 使 用 该 字体 显示 文 
本 ， 步 骤 如 下 。 

力 国 01| 首先 定义 @font-face 选择 器 添加 行书 字体 ， 并 添加 其 字体 文件 ， 添 加 hl 样 

式 ， 使 用 行书 字体 ， 代 码 如 下 : 

<style type="text/css"> 
@font-face { 

font-family: xingshu; 

src: url('Images/xingshu.otf"'); 
hp 


| 
font-family: xingshu; 


CO 


} 
</style> 


表 12-3 @font-face 可 定义 的 样式 属性 


font-famil name 必需 。 规 定 字体 的 名 称 


STC URL 必需 。 定 义 字 体 文件 的 URL 
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font-stretch normal 选 。 定 义 如 何 拉 伸 字体 。 默 认 是 normal 
condensed 
ultra-condensed 
extra-condensed 


semi-condensed 


expanded 


semi-expanded 
extra-expanded 
ultra-expanded 
font-style normal 选 。 定 义 字体 的 样式 。 默 认 是 normal 
italic 
oblique 
font-size 参照 本 书 第 选 。 设 置 文本 字体 大 小 
2 章 的 表 2-8 
font-variant normal 可 选 。 设 置 文本 是 否 大 小 写 
small-caps 


font-weight normal 选 。 定 义 字 体 的 粗细 。 默 认 是 normal 


bold 


100-900 
unicode-range 可 选 。 定 义 字体 支持 的 Unicode 字符 范围 。 默 认 是 U+0-10FFFF 


步骤 四 向 页 面 中 添加 h1， 并 且 添 加 文字 “行书 字体 ”， 代 码 省 略 。 其 执行 效果 如 
图 12-4 所 示 。 


localhost8357/Htmlpag x 
C localhost:8. 


条 扰 字 优 


图 12-4 执行 效果 
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12.4 背景 样式 


CSS 3 包含 多 个 新 的 背景 属性 ， 它 们 提供 了 对 背景 更 强大 的 控制 。 在 CSS 3 之 前 ， 背 
景 图 片 的 尺寸 是 由 图 片 的 实际 尺寸 决定 的 。 在 CSS 3 中 ， 可 以 规定 背景 图 片 的 尺寸 ， 这 就 
允许 在 不 同 的 环境 中 重复 使 用 背景 图 片 。CSS 3 允许 为 元 素 使 用 多 重 背景 图 像 。 

开发 人 员 能 够 以 像素 或 百分比 规定 尺寸 。 如 果 以 百分比 规定 尺寸 ， 那 么 尺寸 相对 于 父 
元 素 的 宽度 和 高 度 。CSS 3 新 增 的 背景 样式 主要 由 以 下 3 个 属性 来 控制 。 

@ 。 background-clip: 规定 背景 的 绘制 区 域 。 

@ ”background-origin: 规定 背景 图 片 的 定位 区 域 。 

@ ”background-size: 规定 背景 图 片 的 尺寸 。 


人 3 background-clip 属 性 


CSS 3 的 background-clip 属性 设置 背景 的 绘制 区 域 ， 当 前 主流 浏览 器 中 ，IE 9、 
Firefox、Opera、Chrome 以 及 Safari 支持 background-clip 属性 。Intemet Explorer 8 以 及 更 
早 的 版 本 不 支持 background-clip 属性 。 其 语法 格式 如 下 : 

background-clip: border-box|lpadding-box|content-box; 

上 述 代码 中 涉及 3 个 属性 ， 对 其 解释 如 下 。 

@ ”border-box: 背景 被 裁剪 到 边框 盒 。 

@ padding-box: 背景 被 裁 前 到 内 边 距 框 。 

@ content-box: 背景 被 裁剪 到 内 容 框 。 


(242 background-origin 属 性 


background-origin 属性 规定 background-position 属性 相对 于 什么 位 置 来 定位 。 如 果 背 
景 图 像 的 background-attachment 属性 为 fxed， 则 该 属性 没有 效果 。 
当前 主流 浏览 器 中 ， 正 9、Firefox 4、Opera、Chrome 以 及 Safari 5 支持 background- 
origin 属性 。 其 语法 格式 如 下 所 示 : 

background-origin: padding-box|border-box|content-box; 

上 述 代 码 中 涉及 3 个 属性 ， 对 其 解释 如 下 。 

@ padding-box: 背景 图 像 相 对 于 内 边 距 框 来 定位 。 

@ 。 border-box: 背景 图 像 相 对 于 边框 盒 来 定位 。 

@ ”content-box: 背景 图 像 相 对 于 内 容 框 来 定位 。 


人 3s background-size 属 性 


background-size 属性 规定 背景 图 像 的 尺寸 。 当 前 主流 浏览 器 中 ， 正 9、Firefox 4、 
”Opera、Chrome 以 及 Safari 5 支持 background-size 属性 。 其 语法 格式 如 下 所 示 : 


c9 


background-size: lengthlpercentagelcoverl|lcontain; 
上 述 代 码 中 涉及 4 个 属性 值 ， 对 其 解释 如 表 12-4 所 示 。 


表 12-4 background-size 的 属性 


属性 值 说 明 
length 设置 背景 图 像 的 高 度 和 宽度 。 第 一 个 值 设 置 宽度 ， 第 二 个 值 设 置 高 度 。 如 果 只 设置 一 
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个 值 ， 则 第 二 个 值 会 被 设置 为 auto 
percentage 以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 。 第 一 个 值 设置 宽度 ， 第 二 个 值 设 置 
高 度 。 如 果 只 设置 一 个 值 ， 则 第 二 个 值 会 被 设置 为 auto 


cover 把 背景 图 像 扩展 至 足够 大 ， 以 使 背景 图 像 完全 履 盖 背景 区 域 。 背 景 图 像 的 某 些 部 分 也 
许 无 法 显示 在 背景 定位 区 域 中 
contain 把 图 像 扩展 至 最 大 尺寸 ， 以 使 其 宽度 和 高 度 完 全 适应 内 容 区 域 
【 例 12.5】 


创建 页 面 并 添加 一 个 有 着 两 行 两 列 的 表格 ， 为 表格 设置 不 同 的 背景 样式 ， 查 看 效果 ， 
步骤 如 下 。 
回国 01】 首先 定义 页 面 表 格 的 共有 样式 ， 为 了 显示 background-clip 属性 的 效果 ， 为 
表格 定义 边框 ， 并 统一 各 个 表格 的 大 小 ， 代 码 如 下 : 


td { 
border-style: dashed; 
border-width: thick; 
border-color: #89D4F4; 
width: 300px; 
height: 200px; 
} 
设置 背景 图 片 占 满 表格 空间 ， 背 景 被 裁剪 到 边框 盒 ， 使 用 一 个 背景 图 片 ， 
代码 如 下 : 
:td { 
background-size: 100% 100%; 
background-image: url('Images/hudie.jpg'); 


background-clip: border-box; 


} 
国 加 03| 设置 背景 图 片 占 满 表格 空间 ， 被 裁 前 到 内 边 距 框 ， 使 用 一 个 背景 图 片 ， 代 
码 如 下 : 


td2 { 
background-size: 100% 100%; 
background-image: url('Images/hudie.jpg'); 
background-clip: padding-box; 


} 
鸭 罚 04| 设置 背景 图 片 占 满 表 格 空间 ， 背 景 被 裁剪 到 内 容 框 ， 使 用 一 个 背景 图 片 ， S| 
代码 如 下 : 
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号 
background-size: 100% 100%; 
background-image: url('Images/hudie.jpg'); 
background-clip: content-box; 


上 

加 到 05 设置 背景 图 片 不 重复 ， 使 用 默认 大 小 、 默 认 布局 和 默认 定位 ， 使 用 两 个 重 
登 的 背景 图 片 ， 第 一 个 是 半 透 明 的 PNG 格式 图 片 ， 第 二 个 是 不 透明 的 JPG 格式 
图 片 ， 代 码 如 下 : 

-td4 { 
background-repeat: no-repeat; 


background-image: url('Images/star.png'),url (Images/hudie.jpg); 
} 


上 述 4 个 表格 使 用 了 相同 的 背景 图 片 ， 其 运行 效果 如 图 12-5 所 示 。 左 上 表 
格 图 片 占 据 了 边框 ; 右上 表格 图 片 在 表格 的 边框 内 部 ;左下 表格 图 片 仅仅 占据 了 
表格 的 内 容 位 置 ， 右 下 表格 图 片 是 正常 大 小 ， 由 于 第 一 个 图 片 是 半 透明 ， 该 表格 
使 用 了 多 重 背景 图 片 重 登 的 样式 。 


12-5 ”背景 样式 


12.5 边框 样式 


CSS 3 中 的 边框 可 以 使 用 圆 角 形状 ， 可 以 为 边框 添加 阴影 ， 可 以 使 用 图 片 来 绘制 边框 
而 且 不 需 使 用 设计 软件 等 。 
CSS 3 的 边框 新 增 样式 主要 由 border-radius、box-shadow 和 border-image 属性 来 控 
制 ， 其 作用 如 下 。 
@ ”border-radius: 设置 边框 形状 。 
为 ， 电 @ “box-shadow: 设置 边框 阴影 。 
2 @ ”border-image: 设置 边框 图 形 。 


(5.1 box-shadow 属 性 


CSS 3 box-shadow 属性 向 框 添加 一 个 或 多 个 阴影 。 该 属性 是 由 去 号 分 隔 的 阴影 列表 ， 
每 个 阴影 由 2~4 个 长 度 值 、 可 选 的 颜色 值 以 及 可 选 的 inset 关键 词 来 规定 。 省 略 长 度 的 值 
是 0。 

当前 流行 的 浏览 器 中 ，IE 9、Firefox 4、Chrome、Opera 以 及 Safari 5.1.1 支持 box- 
shadow 属性 。 其 语法 格式 如 下 所 示 : 


box-shadow: h-shadow v-shadow blur spread color inset; 


上 述 box-shadow 的 属性 值 中 ， 有 多 个 简单 属性 ， 这 些 属性 有 些 是 必需 的 、 有 些 是 可 选 
的 ， 如 表 12-5 所 示 。 


出 痢 慌 音 轩 胃 S SS 赴 ZL EA 


表 12-5 box-shadow 属性 


属性 说 明 
h-shadow 必需 。 水 平 阴 影 的 位 置 。 允 许 负 值 
Vv-shadow 必需 。 垂 直 阴 影 的 位 置 。 允 许 负 值 
blur 可 选 。 模 糊 距离 
Spread 可 选 。 阴 影 的 尺寸 
color 可 选 。 阴 影 的 颜色 
inset 可 选 。 将 默认 的 外 部 阴影 改 为 内 部 阴影 

【 例 12.6】 


定义 表格 的 4 种 样式 ， 分 别 使 用 不 同 的 box-shadow 属性 ， 对 比 box-shadow 属性 的 显 
示 效 果 ， 步 又 如 下 。 

为 了 对 比 box-shadow 属性 的 显示 效果 ， 每 一 种 样式 都 使 用 相同 的 表格 样 
式 、 粗 细 和 颜色 ， 首 先 定义 h-shadow、v-shadow、blur、spread 都 为 3px 的 表格 
边框 ， 代 码 如 下 : 

-tdl { 
border-style: ridge; 
border-width: thick; 
border-color: #89D4F4; 


box-shadow: 3px 3px 3px 3px red; 
} 


定义 h-shadow、v-shadow、blur、spread 都 为 5px 的 表格 边框 ， 代 码 如 下 : 


“test 
border-style: ridge; 
border-width: thick; 
border-color: #89D4F4; 
box-shadow: 5px Spx Spx Spx red; 
} 


步骤 [ 喇 定义 h-shadow、v-shadow、blur、spread 的 大 小 与 步骤 01 相同 ， 但 显示 内 
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部 阴影 的 边框 ， 代 码 如 下 : 


wi 
border-style: ridge; 
border-width: thick; 
border-color: #89D4F4; 
box-shadow: 3px 3px 3px 3px red inset; 


定义 h-shadow、v-shadow、blur、spread 的 大 小 与 步骤 02 相同 ， 但 显示 内 
部 阴影 的 边框 ， 代 码 如 下 : 


-td4 { 

border-style: ridge; 

border-width: thick; 

border-color: #89D4F4; 

box-shadow: 5px 5px Spx 5px red inset; 
} 


向 页 面 中 添加 表格 ， 分 别 使 用 上 述 4 种 样式 ， 这 里 代码 省 略 。 执 行 效果 如 
图 12-6 所 示 。 


| localhost:8357/Htmlpag x 二 = 
人 CDlocalhost8357/HtmlPage5 html 


| | | 
[ I 
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(252 border-image 属 性 


border-image 属性 允许 设置 用 于 边框 的 图 片 。 当 前 浏览 器 中 ，Firefox、Chrome 以 及 
Safari 6 支持 border-image 属性 。Opera 支持 替代 的 -o-border-image 属性 。Safari 5 支持 替代 
的 -webkit-border-image 属性 。 

border-image 属性 是 一 个 简写 属性 ， 用 于 设置 多 条 简单 属性 ， 如 表 12-6 所 示 。 


表 12-6 border-image 属性 


属性 名 称 说 明 
border-image-source 用 在 边框 的 图 片 的 路 径 
border-image-slice | 图 片 边框 向 内 偏 移 
border-image-width 图 片 边框 的 宽度 
border-image-outset 边框 图 像 区 域 超出 边框 的 量 
border-image-repeat 图 像 边 框 是 否 应 平 铺 (repeated)、 铺 满 (rounded) 或 拉 伸 (stretched) 


【 例 12.7】 
定义 4 种 表格 样式 ， 分 别 使 用 同一 个 边框 背景 图 片 ， 使 用 不 同 的 背景 显示 效果 ， 对 比 
border-image 属性 的 显示 效果 ， 步 骤 如 下 。 
首先 定义 一 个 只 有 背景 图 片 ， 没 有 背景 显示 效果 的 表格 样式 ， 以 显示 该 图 
片 的 原型 ， 代 码 如 下 : 


| 
background-image: url('Images/meigui.jpg'); 


} 

定义 边框 样式 ， 使 用 步骤 01 中 的 图 片 设置 边框 背景 ， 并 设置 边框 的 宽度 ， 
代码 如 下 : 

eckee 


border-image: url('Images/meigui.jpg'); 
border-image-width: 20px; 


加 留 03| 在 步骤 02 的 基础 上 添加 border-image-slice 属性 设置 内 偏 移 量 ， 代 码 如 下 : 


“td3 { 
border-image: url('Images/meigui.jpg'); 
border-image-width: 20px; 
border-image-slice: 50%; 


} 
在 步骤 03 的 基础 上 ， 修 改 内 偏 移 量 ， 代 码 如 下 : 


-td4 { 
border-image: urll('Images/meigui.jpg'); 
border-image-width: 20px; 
border-image-slice: 30%; 


} 
向 页 面 中 添加 表格 ， 并 使 用 上 述 4 种 样式 ， 代 码 省 略 。 执 行 效果 如 图 12-7 
所 示 。 


12-7 ”边框 背景 的 使 用 


371 5 


CO 
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《53 border-radius 属 性 


border-radius 属性 是 一 个 简单 有 趣 的 属性 ， 该 属性 的 取 值 可 以 是 数值 和 百分比 ， 通 过 
数值 或 百分比 的 大 小 来 改变 边框 的 弧度 。 
在 当前 主流 浏览 器 中 ， 正 9、Firefox 4、Chrome、Safari 5 以 及 Opera 支持 border- 
radius 属性 。 
同样 是 通过 数值 和 百分比 来 定义 属性 值 ，border-radius 属性 值 与 其 他 属性 的 属性 值 不 
同 ， 其 百分比 和 数值 分 别 实现 不 同 的 效果 : 
@ 单独 使 用 4 个 角 的 百分比 属性 值 实现 的 是 不 规则 边框 ， 其 显示 效果 是 左右 边框 为 
竖 直 边框 、 上 下 边框 为 圆 弧 形 边框 。 
@ 单独 使 用 4 个 角 的 数值 属性 值 实现 的 是 圆 角 甜 形 边框 ， 其 显示 的 效果 是 将 边框 的 
4 个 角 转 换 成 圆 弧 的 形状 ，4 个 角 以 外 的 边框 是 直线 。 
上 述 效 果 是 单独 使 用 1~4 个 数值 的 显示 效果 ， 在 CSS 3 中 ， 可 以 为 边框 的 每 个 角 设置 
两 个 border-radius 属性 值 。 
无 论 border-radius 属性 值 是 百分比 还 是 数值 ， 其 所 设置 的 边框 形状 都 与 属性 值 的 大 小 
密切 相关 。 
【 例 12.8】 
分 别 使 用 百分比 和 数值 设置 两 个 表 的 边框 ， 查 看 其 显示 效果 ， 表 格 的 样式 代码 如 下 : 
<style type="text/css"> 
td 
border: 2px solid #alalal; 
text-align: center; 
width: 270px; 
height: 80px; 
| 
Ed 
border-radius: 30px; 
} 
Ed2 
border-radius: 50px; 
} 
-Ed3 
border-radius: 30%; 
} 
stda | 
border-radius: 50%; 
1 
</style> 
省 略 表格 的 添加 代码 。 分 别 使 用 上 述 代 码 的 4 种 边框 样式 ， 执 行 效 果 如 图 12-8 所 示 。 
例 12.8 中 为 每 个 角 设 置 了 相同 的 样式 ， 仅 仅 使 用 一 个 属性 值 来 确定 表 框 的 每 一 个 角 。 
若 为 边框 设置 4 个 值 ， 则 表示 每 一 个 角 的 弧度 大 小 。 
其 实 每 一 个 角 都 有 两 部 分 构成 ， 一 个 是 水 平 弧度 ; 另 一 个 是 垂直 弧度 。 以 左上 角 的 边 
框 为 例 ， 左 上 角 边 框 相连 的 有 上 边框 和 左边 框 ， 那 么 该 角 有 着 与 上 边框 相连 的 水 平 弧度 和 
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与 左边 框 相连 的 垂直 弧度 ， 这 两 种 弧度 是 可 以 不 一 样 的 。 
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图 12-8 边框 角度 设置 


每 一 个 角 的 两 种 弧度 之 间 使 用 斜 线 来 分 隔 ， 如 果 斜 线 前 后 的 值 都 存在 ， 那 么 斜 线 前 的 
值 设置 水 平 半径 ， 且 和 斜 线 后 的 值 设置 垂直 半径 。 如 果 没 有 斜 线 ， 则 水 平 半 径 和 垂直 半径 相 
等 。 修 改 例 12.8， 使 每 个 角 有 着 不 同 的 水 平 弧度 和 垂直 弧度 ， 如 例 12.9 所 示 。 

【 例 12.9】 

在 例 12.8 的 基础 上 ， 为 每 个 角 添 加 不 同 于 水 平 弧度 的 垂直 弧度 ， 代 码 如 下 : 


Cdl 
border-radius: 30px/50px; 


1 
Ed 

border-radius: 50px/30px; 
} 
“td3 二 

border-radius: 30%/50%; 
} 
tla tf 

border-radius: 50%/30%; 
} 


这 里 省 略 表格 的 添加 代码 。 分 别 使 用 上 述 代码 的 4 种 边框 样式 ， 其 执行 效果 如 图 12-9 
所 示 。 
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border-radius 属性 是 一 个 简写 属性 ， 用 于 设置 边框 4 个 角 的 属性 。 其 定义 的 顺序 依次 


是 左上 、 
如 果 

同 。 如 果 
(D 


有 上 在下 下。 

省 略 bottom-left， 则 与 top-right 相同 。 如 果 省 略 bottom-right， 则 与 top-left 相 
省 略 top-right， 则 与 top-left 相同 。 下 列 两 段 代 码 的 效果 是 一 样 的 。 

简写 代码 : 


border-radius: 2em lem 4em / 0.5em 3em; 


2 


完整 代码 ; 


border-top-left-radius: 2em 0.5em; 
border-top-right-radius: lem 3em; 
border-bottom-right-radius: 4em 0.5em; 
border-bottom-left-radius: lem 3em; 


本 章 
式 。 根 据 
式 ， 要 求 


我 们 
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详细 介绍 了 CSS 3 中 的 新 增 样式 ， 包 括 文本 样式 、 字 体 样 式 、 背 景 样式 和 边框 样 
本 章 内 容 ， 设 计 不 同 的 表格 样式 ， 综 合 文本 样式 、 字 体 样式 、 背 景 样式 和 边框 样 
如 下 : 

设计 两 种 表格 样式 ， 一 种 是 圆 形 边框 ， 另 一 种 是 图 形 边框 。 

圆 形 边框 要 求 表格 呈现 正规 圆 形 ， 圆 心 到 边框 的 距离 相等 。 

圆 形 边框 为 红色 实 线 ， 宽 度 为 40px。 

圆 形 边框 内 部 使 用 有 阴影 的 字体 。 

图 形 边框 使 用 行书 字体 。 

图 形 边框 使 用 如 图 12-10 所 示 的 边框 ， 而 内 部 使 用 如 图 12-11 所 示 的 背景 图 片 。 


12-10” 圆 形 边框 12-11 表格 背景 


来 实现 上 述 要 求 ， 步 又 如 下 。 


区 到 01] 首先 定义 这 两 个 表格 的 共有 属性 ， 两 个 表格 的 大 小 相同 ， 为 了 能 够 绘制 出 
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正 圆 形 边框 ， 需 要 使 用 正方 形 的 表格 ， 即 表格 的 宽 和 高 相等 。 使 用 40px 宽 的 实 
线 ， 代 码 如 下 : 


} 


border: 40px solid; 
text-align: center; 
width: 160px; 
height: 160px; 


定义 圆 形 表格 ， 呈 现 正规 圆 形 、 圆 形 边框 为 红色 实 线 、 宽 度 为 40px、 使 用 


有 阴影 的 字体 ， 代 码 如 下 : 


SET 


} 


border-color: #f00; 
background-color: #ffd800; 
border-radius: 50%/50%; 

font-size: xx-large; 

color: red; 

text-shadow: 20px 20px 3px #ff6a00; 


定义 图 形 表格 ， 由 于 需要 使 用 浏览 器 没有 的 字体 ， 因 此 需要 先 定义 字体 样 


式 ， 代 码 如 下 : 


@font-face { 


} 


font-family: xingshu; 
src: urll('Images/xingshu.otf"'); 


定义 图 形 表格 的 样式 ， 该 表格 使 用 指定 的 图 片 作为 边框 ， 同 时 使 用 指定 的 


图 片 作为 背景 。 边 框图 片 和 背景 图 片 都 是 jpg 格式 的 ， 没 有 透明 性 ， 因 此 不 能 够 
通过 背景 多 重 性 进行 设置 。 其 设置 内 容 如 下 所 示 : 

分 别 设置 边框 背景 图 片 和 表格 背景 图 片 。 

设置 表格 字体 为 行书 字体 。 

设置 字体 颜色 为 红色 。 

设置 字体 大 小 为 xx-large。 

设置 背景 图 片 的 大 小 为 100%( 占 满 表格 )。 

设置 边框 宽度 能 够 显示 边框 图 片 的 边缘 。 

设置 边框 图 片 的 内 偏 移 能 够 显示 边框 图 片 的 边缘 。 


代码 如 下 : 


-td2 { 


月 
2 


border-image: url('Images/stars.jpg'); 
background-image: url('Images/red.jpg'); 
font-family: xingshu; 

color: red; 

font-size: xx-large; 

background-size: 100% 100%; 
border-image-width: 55px; 
border-image-slice: 27%; 


回 05| 向 页 面 中 添加 两 个 表格 ， 使 用 上 述 两 种 样式 ， 显 示 效 果 如 图 12-12 所 示 。 
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12.7 本 章 习 题 


(1) word-wrap 属性 的 可 取 值 有 normal 和 
(2) 规定 背景 图 片 的 定位 区 域 的 属性 是 


(3) 边框 样式 的 新 增 样式 主要 有 border-radius、 和 border-image。 
(4) 设置 边框 阴影 的 属性 是 
2. 选择 题 
(1) text-shadow 属性 不 能 够 被 浏览 器 所 支持 。 
A. IE9 B. Chrome C. Safarn D. Opera 
(2) 下 列 不 属于 新 增 背 景 属性 的 是 
A. background-clip B. background-origin 
C. background-size D. background-position 
(3) box-shadow 属性 值 中 ， 不 可 以 省 略 的 属性 是 
A. blur B. v-shadow C. spread D. color 


(4) 下 列 属性 值 中 ， 能 够 被 Opera 支持 的 是 


A. border-image B. word-break CC. box-shadow  D. text-emphasis 
3. 上 机 练习 


网 购 中 ， 用 户 根据 关键 字 或 商品 类 型 查询 商品 ， 系 统 将 给 出 符合 条 件 的 商品 信息 ， 布 
满 一 个 页 面 。 创 建 商品 信息 页 面 ， 满 足 如 下 要 求 : 
@ 页面 中 布 满 商品 信息 (图 片 和 说 明 )。 
不 同 品牌 的 商品 使 用 不 同 的 背景 图 片 边 框 。 
特价 商品 的 说 明文 字 使 用 红色 阴影 。 
每 一 种 商品 的 图 片 (td 或 div 背景 ) 使 用 指定 的 大 小 。 
每 一 种 商品 的 图 片 (td 或 div 背景 ) 通 过 相对 于 内 边 距 框 来 定位 。 
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CSS 3 页 面 布 局 样式 


在 设计 网 页 时 ， 能 否 控 制 好 各 个 模块 在 页 面 中 的 位 置 是 非常 关键 的 。 在 使 用 
DIV + CSS 2 进行 布局 时 ， 提 出 了 念 子 模型 的 概念 ， 它 指定 了 元 素 在 页 面 上 如 何 
显示 、 显 示 的 位 置 以 及 具有 的 交互 功能 。 这 时 的 盒子 主要 依赖 于 float 属性 和 
position 属性 。 

CSS 3 在 原来 念 子 模型 的 基础 上 提出 了 弹性 模型 ， 并 提供 了 相关 的 属性 支 
持 下 例如 ， 新 增 的 columns 系列 属性 可 以 实现 页 面 的 多 列 布局 ，box 系列 属性 可 
以 更 大 精 殉 贴 控制 子 元 素 的 排列 位 置 、 对 齐 方式 ,以 及 溢出 时 的 处 理 方式 。 除 此 
之 外 ， 也 新 增 了 此 实用 的 水 而 布局 请 

沫 章 将 从 多 列 布局 、 侈 模型 和 界面 布局 三 个 方面 详细 介绍 CSS 3 新 增 的 属 
性 、 语 法 格式 2 其 使 用 示例 。 


本 章 学 习 目 标 : 

熟悉 columns、column-width 和 column-count 属性 
熟悉 column-gap 属性 和 column-rule 属性 

掌握 column-span 属性 和 column-fill 属性 

熟悉 CSS 3 新 增 的 弹性 盒 模型 的 相关 属性 

熟悉 CSS 3 新 增 的 界面 布局 属性 
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13.1 新 增 的 多 列 布局 属性 


在 CSS 2 以 及 先前 的 版 本 中 ， 依 靠 浮动 布局 和 定位 布局 来 实现 页 面 的 多 列 布局 设计 。 
其 中 前 者 比较 灵活 ， 但 是 容易 发 生 布局 错乱 ， 从 而 影响 页 面 的 整体 效果 ， 而 且 这 种 方式 需 
要 大 量 的 样式 代码 ， 增 加 了 设计 人 员 不 必要 的 工作 量 ; 后 者 可 以 实现 精确 定位 ， 但 是 它 无 
法 满足 模块 的 自 适用 能 力 ， 以 及 模块 间 的 文档 流 联动 需要 。 

CSS 3 中 新 增 的 多 列 自动 布局 解决 了 上 面 的 问题 ， 使 用 多 列 布局 属性 可 以 自动 地 将 内 
容 按 指定 的 列 数 排列 ， 非 常 适合 报纸 和 杂志 类 网 页 布局 。 下 面 详细 介绍 多 列 布局 属性 的 语 
法 及 其 具体 应 用 。 


人 .1 columns 属 性 


columns 属性 用 于 定义 页 面 上 块 元 素 显 示 的 列 数 ， 及 每 列 的 宽度 。 该 属性 的 语法 格式 
如 下 : 

columns: [column-width] || [column-count] 

这 里 的 column-width 和 column-count 又 分 别 是 独立 的 属性 。 其 中 ，columns-width 用 于 
定义 每 列 的 宽度 ，columns-count 用 于 定义 列 数 。 


【 例 13.1】 
创建 一 个 示例 ， 使 用 columns 属性 将 博客 页 面 的 文章 显示 分 为 3 列 。 如 下 所 示 为 文章 
布局 的 代码 : 


<div id="middle"> 

<h2> 最 珍贵 的 东西 是 免费 的 </h2> 

<div class="art"> 

<br /> 

忽然 发 觉 ， 在 这 个 世界 上 ， 最 珍贵 的 东西 是 免费 的 。 

<br /> 

阳光 ， 是 免费 的 。 芸 芸 众 生 ， 没 有 谁 能 够 离开 阳光 活 下 去 ; 然而， 从 小 到 大 ， 可 曾 有 谁 为 自己 享 
受过 的 阳光 支付 过 一 分 钱 ? 


<br /> 


<!-- 省 略 其 他 内 容 --> 


</div> 
</div> 


为 上 面 class 为 art 的 div 元 素 添加 CSS 样式 。 使 用 columns 属性 定义 显示 为 3 列 ， 每 
列 宽 150 像素 ， 代 码 如 下 : 


aart i 
columns: 150px 3; 
-moz-columns: 150px 3; /* Firefox */ 
—webkit-columns: 150px 3; /* Safari and Chrome */ 


CN 


在 浏览 器 中 运行 上 述 代码 ， 查 看 多 列 显示 效果 ， 如 图 13-1 所 示 。 
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13-1 多 列 运行 效果 


人 .2 column-width 属 性 


column-width 属性 用 于 设置 页 面 上 单列 显示 的 宽度 ， 它 适用 于 除了 表格 元 素 之 外 的 非 
替换 块 元 素 、 行 内 块 元 素 和 表单 格 。 

column-width 属性 的 语法 如 下 : 

column-width: <length> | auto 

该 属性 有 如 下 两 种 取 值 。 

@ length: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 以 为 负 值 。 

@ auto: 它 根据 浏览 器 计算 值 自 动 设置 。 


医治 提示 : column-width 属性 可 以 与 其 他 多 列 布 局 属性 配合 使 用 ， 设 计 指 定 固定 列 
数 、 列 宽 的 布局 效果 ; 也 可 以 单独 使 用 ， 限 制 模块 的 单列 宽度 ， 当 超出 宽度 时 ， 则 自动 
以 多 列 进行 显示 。 


例如 ， 对 前 面 例 13.1 中 的 样式 进行 修改 ， 替 换 成 如 下 使 用 column-width 属性 的 代码 : 


2 

-moz-column-width: 100px; /* Firefox */ 
-webkit-column-width: 100px; /* Safari and Chrome */ 
column-width: 100px; 

} 


再 次 查看 页 面 ， 如 果 网 页 内 容 能 够 在 单列 内 显示 ， 则 会 以 单列 显示 ; 如 果 宽 度 足 够 
宽 ， 且 内 容 很 多 ， 则 会 在 多 列 中 显示 ， 如 图 13-2 所 示 。 
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图 13-2 ”columns-width 属 性 的 运行 效果 


人 > .3 ” column-count 属 性 


column-count 属性 用 于 设置 页 面 上 对 象 显示 的 列 数 ， 它 的 适用 元 素 与 columns 属性 和 
column-width 属性 一 样 。 语 法 如 下 : 


column-count: <integer> | auto 


该 属性 有 如 下 两 种 取 值 。 

e@ ”integer: 用 来 定义 栏目 的 列 数 ， 它 的 取 值 是 一 个 大 于 0 的 整数 ， 不 允许 有 负 值 。 
如 果 column-width 和 column-count 属性 没有 明确 值 ， 则 该 值 为 最 大 列 数 。 

e@ auto: 根据 浏览 器 计算 值 自动 设置 。 

例如 ， 对 例 13.1 中 的 样式 进行 修改 ， 蔡 换 成 如 下 使 用 column-count 属性 的 代码 : 


= 

-moz-column-count: 3; /* Firefox */ 
-webkit-column-count: 3; /* Safari and Chrome */ 
column-count: 3; 


} 
青 次 查看 页 面 ， 无 论 浏览 器 窗口 怎么 调整 ， 页 面 总 是 会 显示 为 3 列 ， 如 图 13-3 所 示 。 
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13-3 ”column-count 属 性 的 运行 效果 


DN 


(3.1.4 column-gap 属 性 
column-gap 属性 用 于 设置 多 列 布局 时 的 列 间 距 ， 语 法 如 下 : 


column-gap: <length> | normal 
取 值 有 两 个 : length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 以 为 负 值 ; 
normal 根据 浏览 器 默认 设置 进行 解析 ， 一 般 为 lem， 即 16px。 
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【 例 13.2】 

例如 ， 例 13.1 的 例子 重新 设计 成 显示 3 列 ， 每 列 之 间距 离 为 30px。 样 式 代码 如 下 : 
SEE 

-moz-column-count: 3; A irefox */ 

-webkit-column-count: 3; /* Safari and Chrome */ 

column-count: 3; 

-moz-column-gap: 30px; /* Firefox */ 


-webkit-column-gap: 30px; /* Safari and Chrome */ 
column-gap: 30px; 
} 


在 浏览 器 中 运行 页 面 ， 本 次 练习 的 代码 效果 如 图 13-4 所 示 。 
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13-4 ”column-gap 属 性 的 运行 效果 


(3.1.5 column-rule 属 性 
column-rule 属性 用 于 设置 多 列 布局 时 列 之 间 边 框 的 宽度 、 样 式 和 颜色 。 语 法 如 下 : 


column-rule: [column-rule-width]|[column-rule-style]|[column-rule-color] 

各 个 属性 值 的 含义 如 下 。 

@ column-rule-width: 设置 列 之 间 的 边框 宽度 。 

@ column-rule-style: 设置 列 之 间 的 边框 样式 。 

@ column-rule-color: 设置 列 之 间 的 边框 颜色 。 

【 例 13.3】 

在 例 13.2 的 基础 上 进行 修改 ， 设 置 列 之 间 的 边框 为 2 像素 ， 使 用 白色 虚线 显示 。 修 改 
后 的 样式 代码 如 下 : 
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-art { 
—moz-column-count: 3; /* Firefox */ 
-webkit-column-count: 3; /* Safari and Chrome */ 
column-count: 3; 
—moz-column-gap: 30px; /* Firefox */ 
-webkit-column-gap: 30px; /* Safari and Chrome */ 
column-gap: 30px; 
-webkit-column-rule: 2px dashed #FFF;  /* 设置 列 与 列 之 间 的 边框 样式 */ 
-moz-column-rule: 2px dashed #FFF; 
column-rule: 2px dashed #FFF; 

} 


在 浏览 器 中 运行 本 次 练习 的 代码 ， 观 察 效果 ， 如 图 13-5 所 示 。 


13-5 ”column-rule 属 性 的 运行 效果 


column-rule 复合 属性 派生 出 了 三 个 与 列 边框 相关 的 属性 : column-rule-width 属性 、 

column-rule-style 属性 和 column-rule-color 属性 。 

e@ column-rule-width: 用 于 设置 列 与 列 之 间 的 边框 宽度 。 值 是 浮 点 数 ， 但 是 不 能 为 
负 值 ， 如 果 值 为 none， 则 自动 忽略 该 属性 。 

@ column-rule-style: 用 于 设置 列 与 列 之 间 的 边框 样式 ， 如 果 column-rule-width 属性 
的 值 设置 为 0， 则 自动 忽略 该 属性 。 该 属性 的 取 值 可 以 是 none、hidden、dotted、 
dashed、solid、double、groove、ridge、inset 和 outset。 

@ column-rule-color: 用 于 设置 列 与 列 之 间 边 框 的 颜色 ， 值 可 以 是 所 有 的 颜色 。 如 果 
column-rule-width 等 于 0， 或 column-rule-style 设置 为 none， 本 属性 将 会 自动 地 被 


忽略 。 
例如 ， 例 13.3 中 的 样式 代码 可 以 使 用 以 下 代码 来 代替 : 
= 
column-rule-width: 2px; /* 边框 宽度 */ 
column-rule-style: dotted; /* 边框 样式 */ 
column-rule-color: #FFF; /* 边框 颜色 */ 


/* 省 略 兼 容 浏 览 器 时 私有 属性 的 设置 和 其 他 样式 设置 */ 


人 > .6 ” column-span 属 性 


column-span 属性 用 于 设置 对 象 元 素 是 否 横 跨 所 有 列 ， 它 适用 于 除 浮动 和 绝对 定位 之 外 
的 块 级 元 素 。 基 本 语法 如 下 : 
column-span: none | all 


column-span 属性 的 取 值 非常 简单 ，none 表示 不 跨 列 ， 只 在 本 栏 中 显示 ; all 则 表示 横 
跨 所 有 列 ， 并 定位 在 列 的 Z 轴 之 上 。 

在 前 面 的 示例 中 ， 文 章 标题 是 通过 center 来 居中 显示 的 。 除 了 这 种 方式 外 ， 可 以 使 用 
solumn-span 属性 实现 相同 的 效果 。 样 式 代码 如 下 : 


#center content h21{ 
text-align: center; 
-webkit-column-span: all; 
-moz-column-span: all; 
column-span: all; 

/* 省 略 其 他 属性 的 设置 */ 

} 


人 .7 column-fill 属 性 


column-fill 属性 用 于 设置 所 有 列 的 高 度 是 否 统一 ， 适 用 于 多 列 布局 元 素 。 

其 语法 如 下 

column-fill: auto | balance 

取 值 有 两 种 : auto 表示 列 高 度 自 适应 内 容 ， 各 列 的 高 度 随 其 内 容 的 变化 而 自动 变化 ; 
balance 表示 所 有 列 的 高 度 以 其 中 最 高 的 一 列 进行 统一 。 

如 下 代码 展示 了 column-fill 属性 的 应 用 : 


.test{ 
width: 600px; 
border: 10px solid #000; /* 边框 样式 */ 
column-count: 2; /* 显示 的 列 数 */ 
column-gap: 20px; /* 间隙 大 小 */ 
column-rule: 3px solid #090; /* 列 之 间 的 边框 样式 */ 


column-fil1: balance; 


/* 省 略 兼容 浏览 器 时 私有 属性 的 设置 */ 
13.2 ”新 增 的 盒 模型 属性 
CSS 3 对 原来 的 盒 模型 进行 了 调整 ， 提 出 了 弹性 盒 模型 的 概念 。 新 的 弹性 盒 模型 可 以 


更 加 灵活 地 决定 元 素 在 盒子 中 的 分 布 方式 以 及 如 何 处 理 盒子 的 可 用 空间 。 
CSS 3 中 与 弹性 盒 模型 相关 的 有 8 个 属性 ， 下 面 详细 介绍 。 
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(G21 box-orient 属 性 


box-orient 属性 用 于 设置 弹性 盒 模型 中 子 元 素 的 排列 方式 。 
box-orient 属性 的 语法 如 下 : 


box-orient: horizontal | vertical | inline-axis | block-axis 


如 下 对 box-orient 属性 的 取 值 进行 了 说 明 。 

@ ”horizontal: 设置 弹性 盒 模型 对 象 中 子 元素 为 水 平 排列 ， 即 盒子 元 素 从 左 到 右 在 一 
条 水 平 线 上 显示 它 的 子 元 素 。 

@ vertical:， 设置 弹性 盒 模型 对 象 的 子 元 素 为 纵向 排列 ， 即 盒子 元 素 从 上 到 下 在 一 条 
垂直 线 上 显示 它 的 子 元 素 。 

@ inline-axis: 盒子 元 素 沿 着 内 联 轴 显 示 它 的 子 元 素 。 

@ ”block-axis: 盒子 元 素 沿 着 块 轴 显 示 它 的 子 元 素 。 


迪 注意 : 在 使 用 弹性 盒 模型 的 时 候 ， 需 要 先 把 父 容 器 的 display 属性 设置 为 box 或 
者 inline-box。 


【 例 13.4】 
在 CSS 2 盒 模型 中 ，HTML 文档 流 总 是 在 垂直 方向 上 排列 盒子 。 使 用 弹性 盒 模型 就 可 
以 重新 定义 文档 流 的 顺序 。 
假设 在 一 个 HIML 页 面 中 有 如 下 布局 代码 : 
<div class="art"> 
<p> 最 珍贵 的 东西 是 免费 的 </p> ”<p> 烟 民 的 十 五 个 等 级 </p> 


<p> 世 界 最 伟大 的 管理 原则 </p> ”<p> 一 个 网 页 设计 师 的 情书 </p> <p> 音 乐 心情 </p> 
</div> 


上 述 代码 中 ，class 为 art 的 div 是 一 个 父 容器 ， 其 中 包含 了 5 个 p 元 素 。 使 用 CSS 定 
义 p 元素 的 样式 ， 代 码 如 下 : 


-art pt{ 
margin: 5px; 
padding: Spx; 
line-height: S50px; 
text-align: center; 
border: lpx #000 solid; 
background-color: #F5F5F5; 


} 


在 浏览 器 中 查看 效果 ， 此 时 5 个 p 元 素 将 会 垂直 排列 在 art 容器 内 ， 如 图 13-6 所 示 。 
下 面 为 art 容器 添加 box-orient 属性 ， 使 子 元 素 呈 水 平方 向 显示 ， 样 式 代码 如 下 : 


art 
display: -webkit-box; 
—webkit-box-orient: horizontal; /* Webkit 引擎 */ 


display: -moz-box; 
-moz-box-orient: horizontal; /* Mozilla Gecko 引擎 */ 


display: box; 
box-orient: horizontal; /* 兼容 标准 */ 
} 


再 次 在 浏览 器 中 查看 效果 ， 会 发 现 5 个 p 元 素 水 平 显示 在 art 容器 内 ， 效 果 如 图 13-7 
所 示 。 
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图 13-6 默认 所 谓 垂直 运行 效果 图 13-7 ”使 用 box-orient 属 性 后 的 水 平 运行 效果 


(322 box-direction 属 性 


box-direction 属性 用 于 设置 弹性 盒 模型 中 对 象 的 子 元 素 排列 顺序 是 否 反 转 。 
其 语法 如 下 : 


box-direction: normal | reverse | inherit 


默认 值 为 normal， 表 示 子 元 素 按 正 常 顺序 排列 。 如 果 盒 子 元 素 的 box-orient 属性 值 为 
horizontal， 则 其 包含 的 子 元 素 按 照 从 左 到 右 的 顺序 显示 ; 如果 盒子 元 素 的 box-orient 属性 
值 为 vertical， 则 其 包含 的 子 元 素 按照 从 上 到 下 的 顺序 显示 。reverse 值 表示 反 转 弹性 盒 模型 
对 象 的 子 元 素 的 排列 顺序 。inherit 值 表示 继承 上 级 元 素 的 顺序 。 

【 例 13.5】 

对 例 13.4 中 art 容器 的 样式 进行 修改 ， 增 加 值 为 reverse 的 box-direction 属性 ， 使 子 元 
素 水 平 显 示 时 顺序 进行 反 转 。 样 式 代 码 如 下 : 


rt { 


/* 省 略 box-orient 属性 的 设置 */ 

-moz-box-direction: reverse; /* Mozilla Gecko 引擎 */ 
-webkit-box-direction: reverse; /* Webkit 引擎 */ 
box-direction: reverse; /* 兼容 标准 */ 


/* 省 略 兼 容 性 设置 */ 


} 
重新 在 浏览 器 中 运行 上 述 代码 进行 测试 ， 效 果 如 图 13-8 所 示 。 
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bs 不 同 的 浏览 器 中 ， 运 行 出 来 的 效果 可 能 会 有 所 差异 。 例 如 ，Firefox 浏览 器 
在 将 元 素 的 排列 顺序 反 转 的 同时 ， 也 会 将 元 素 的 对 齐 方式 进行 逆转 ， 而 其 他 浏览 器 只 是 
反 转 元 素 排列 顺序 。 


《>s box-ordinal-group 属 性 


box-ordinal-group 属性 能 够 设置 弹性 盒 模型 中 每 个 子 元 素 在 盒子 内 的 显示 位 置 。 语 法 
如 下 : 
box-ordinal-group: <integer> 
integer 是 一 个 从 1 开始 的 自然 数 ， 用 来 定义 子 元 素 的 显示 顺序 。 子 元 素 的 分 布 将 根据 
这 个 属性 值 从 小 到 大 进行 排列 ， 即 数值 较 小 的 元 素 显示 在 数值 较 大 的 元 素 前 面 。 
默认 情况 下 ， 子 元 素 将 根据 元 素 的 位 置 进 行 排列 。 如 果 没 有 指定 box-ordinal-group 属 
性 值 的 子 元 素 ， 则 其 序号 默认 都 为 1， 并 且 序 号 相同 的 元 素 将 按照 它们 在 文档 中 加 载 的 顺 
序 进 行 排列 。 另 外 ， 相 同 数值 的 元 素 ， 它 们 的 显示 顺序 取决 于 它们 的 代码 顺序 。 
【 例 13.6】 
创建 一 个 示例 ， 演 示 使 用 box-ordinal-group 属性 更 改 子 元 素 显示 位 置 前 后 的 效果 。 
假设 在 一 个 HTML 中 有 如 下 代码 : 
<div id="left"> 
<div id="menu"></div> 
<div id="post"></div> 
</div> 
在 上 述 代 码 中 ，ID 是 menu 的 div 元 素 用 来 显示 网 站 的 导航 菜单 ; ID 是 post 的 div 元 
素 用 来 显示 最 新 文章 标题 。 
在 原来 定义 的 样式 基础 上 添加 新 的 样式 。 定 义 left 容器 内 的 div 元 素 使 用 
盒 模型 ， 并 在 容器 内 垂直 显示 。 主 要 代码 如 下 : 


#left{ 
display: -ms-box; 
box-orient: vertical ; /* 兼容 标准 */ 


/* 省 略 私 有 属性 */ 


国 玫 03] 在 浏览 器 中 浏览 页 面 ， 此 时 menu 和 post 将 按照 页 面 中 的 定义 顺序 显示 ， 
如 图 13-9 所 示 。 

步骤 中] 为 menu 容器 使 用 box-ordinal-group 属性 ， 设 置 显示 顺序 为 2， 即 显示 在 默 
认 元 素 (顺序 为 1 之后。 代码 如 下 : 

#left #menu { 
box-ordinal-group: 2; 
—webkit-box-ordinal-group: 2; 
—moz-box-ordinal-group: 2; 
-0o-box-ordinal-group: 2; 


在 浏览 器 中 重新 运行 页 面 ， 查 看 效果 ， 如 图 13-10 所 示 。 
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图 13-9 默认 页 面 效果 图 13-10 ”使 用 box-ordinal-group 属 性 后 的 效果 


人 2>4 box-flex 属 性 


在 传统 的 网 页 设计 中 ， 如 果 要 把 一 个 盒子 分 成 三 栏 ， 最 简单 的 一 种 方法 就 是 把 3 个 子 
盒子 元 素 的 宽度 都 设置 为 33.3%。 这 种 方法 无 法 把 父 盒子 的 宽度 完全 填充 ， 当 父 盒子 的 宽 
度 足 够 大 的 时 候 ， 用 户 会 看 到 没有 填 满 的 空白 区 域 ， 这 是 非常 不 美观 的 。 但 是 ， 如 果 为 子 
元 素 设置 了 固定 宽度 值 ， 弹 性 布局 会 变 得 更 加 复杂 ， 如 果 使 用 box-flex 属性 ， 这 个 问题 就 
会 迎刃而解 。 

box-flex 属性 解决 了 传统 设计 中 习惯 使 用 百分比 定义 弹性 布局 的 浆 端 。 其 语法 如 下 : 


box-flex: <number> 


number 是 一 个 整数 或 者 小 数 ， 初 始 值 是 0.0。 当 盒子 中 包含 多 个 定义 了 box-flex 属性 
的 子 元 素 时 ， 浏 览 器 将 会 所 把 这 些 子 元 素 的 box-flex 属性 值 相 加 ， 然 后 根据 它们 各 自 的 什 
占 总 值 的 比例 来 分 配 盒子 剩余 的 空间 。 

【 例 13.7】 

使 用 box-flex 属性 更 改 页 面 中 相 邻 两 个 子 元 素 的 宽度 。 

页 面 中 的 main 容器 有 两 个 子 容器 ， 即 middle 和 right。 部 分 代码 如 下 : 
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<div id="main"> 
<div id="middle"> </div> 
<div id="right"> </div> 


</div> 

定义 main 容器 的 样式 为 box 盒 模型 ， 并 且 设置 子 元 素 水 平分 布 ， 具 体 代码 
这 里 不 再 给 出 。 

力 玫 03| 定义 middle 容器 的 宽度 为 5，right 容器 的 宽度 为 4， 样 式 代码 如 下 : 


#main #middle { 
-moz-box-Fleox: 5 /* Firefox */ 
-webkit-box-flex: 5; /* Safari and Chrome */ 
box-flex: 5; 
background-color: #390; 

} 

#main #right { 
-moz-box-flex: 4.0; /* Firefox */ 
-webkit-box-flex: 4.0; /* Safari and Chrome */ 
box-flex: 4; 
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默认 情况 下 ， 子 元 素 并 不 具有 弹性 。 只 有 box-flex 属性 大 于 0 时 ， 才 会 变 得 富有 了 弹 
性 。 当 子 元 素 具 有 弹性 时 ， 可 以 通过 以 下 方式 来 改变 它 的 尺寸 : 
@ ”使 用 width、height、min-width、min-height、max-width 或 者 max-height 属性 来 定 

义 尺寸 。 

@ ”利用 盒子 的 尺寸 来 限制 元 素 的 弹性 尺寸 。 

e@ ”借助 盒子 剩余 的 所 有 空间 来 限制 子 元 素 的 弹性 尺寸 。 

如 果子 元 素 没有 声明 大 小 ， 那 么 其 尺寸 将 完全 取决 于 盒子 的 大 小 ， 即 子 元 素 的 大 小 等 
于 盒子 的 大 小 乘 以 它 的 box-flex 属性 值 在 所 有 子 元 素 的 box-flex 属性 值 总 和 中 的 百分比 。 


用 公式 表示 如 下 : 
子 元 素 的 尺寸 = 盒子 的 尺寸 x 子 元 素 的 box - flex 属性 值 / 所 有 子 元 素 的 box-flex 属性 值 的 和 


如 果 一 个 或 者 多 个 子 元 素 中 声明 了 具体 的 尺寸 ， 那 么 其 大 小 将 计 入 其 中 ， 余 下 的 弹性 
盒子 将 按照 上 面 的 原则 分 享 剩 下 的 可 利用 空间 。 


(325 box-flex-group 属 性 


box-flex-group 属性 用 于 设置 弹性 盒 模型 中 对 象 子 元 素 的 所 属 组 。 它 动态 地 给 数值 较 大 
的 组 分 配 其 内 容 所 需 的 实际 内 容 ， 剩 余 空 间 则 平均 分 给 数值 最 小 的 那个 组 (可 能 有 1 个 或 者 
多 个 元 素 )。box-flex-group 属性 的 语法 与 box-flex 属性 类 似 ， 如 下 所 示 : 


box-flex-group: <integer> 


integer 的 取 值 与 box-flex 属性 相同 ， 这 里 就 不 再 重复 介绍 。 


(326 box-pack 属 性 


当 弹 性 与 非 弹性 元 素 混合 排版 时 ， 有 可 能 会 出 现 所 有 子 元 素 的 尺寸 大 于 或 者 小 于 盒子 的 
尺寸 ， 从 而 出 现 盒子 空间 不 足 或 者 剩余 的 情况 ， 这 时 就 需要 一 种 方法 来 管理 盒子 的 空间 。 
如 果子 元 素 的 总 尺寸 小 于 盒子 的 尺寸 ， 则 可 以 使 用 box-align 和 box-pack 属性 进行 管理 。 

box-pack 属性 可 以 在 水 平方 向 上 对 盒子 的 剩余 空间 进行 管理 ， 语 法 如 下 : 

box-pack: start | center | end | justify 

下 面 对 常 用 取 值 进行 说 明 。 

estart: 所 有 子 元 素 都 在 盒子 的 左 侧 ， 剩 余 的 空间 显示 在 盒子 的 右 侧 。 

e@ center: 剩余 的 空间 在 盒子 的 两 侧 平均 分 配 。 

e@ end: 所 有 子 元 素 都 在 盒子 的 右 侧 ， 剩 余 的 空间 显示 在 盒子 的 左 侧 。 

@ justify: 剩余 的 空间 在 子 元 素 之 间 平 均 分 配 ， 在 第 一 个 子 元 素 之 前 和 最 后 一 个 子 

元 素 之 后 不 分 配 空间 。 

box-pack 属性 受到 box-orient 属性 的 影响 ， 默 认 情况 下 ( 即 box-orient 属性 的 值 设置 为 
horizontal 时 )start 和 end 所 呈现 的 效果 等 同 于 左 对 齐 和 右 对 齐 。 当 box-orient 属性 的 值 设置 
为 vertical 时 ，start 和 end 所 呈现 的 效果 等 同 于 顶部 对 齐 和 底部 对 齐 。 

【 例 13.8】 
使 用 box-pack 属性 实现 子 元 素 的 水 平和 垂直 排列 显示 。 
葬 加 01| 创建 一 个 HTML 页 面 。 在 页 面 中 创建 一 个 ID 是 art 的 div 元 素 作为 父 容 
器 ， 向 里 面 添加 4 个 class 是 demo 的 div 元 素 作 为 子 元 素 。 结 构 代 码 如 下 : 
<div class="art"> 
<div class="demo"> </div> 
<div class="demo"> </div> 
<div class="demo"> </div> 


<div class="demo"> </div> 
</div> 
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步骤 四 在 demo 容器 内 添加 一 个 hl 和 一 个 由 元 素 。ul 元 素 的 ID 和 class 都 是 
box， 代 码 如 下 : 


<div class="demo"> 
<h1> 横 向 box-pack 属性 为 start</h1> 
<ul id="box" class="box"> 
<Ei>1</1i> 
<1i>2</1i> 
<1i>3</1i> 
</ul> 
</div> 


添加 class 属性 值 是 box 的 样式 ， 使 其 以 盒 模型 显示 ， 并 让 其 中 的 子 元 素 呈 
现 水 平方 向 排列 。 主 要 样式 如 下 所 示 : 


.box{ 
display: box; 
margin: 0; 
padding: 10px; 
background: #000; 
list-style: none; 
box-orient: horizontal; 
width: 260px; 
height: 100px; 


} 


好 涩 04| 为 了 使 box 中 的 子 元 素 在 水 平方 向 上 左 对 齐 需 要 使 用 box-pack 属性 ， 并 设 
置 值 为 start。 主 要 样式 如 下 所 示 : 
#box { 
—webkit-box-pack: start; 
-moz-box-pack: start; 
-0o-box-pack: start; 
-ms-box-pack: start; 


box-pack: start; 
} 


力 国 05] 使 用 相同 的 方法 将 第 二 个 demo 设置 为 水 平 排列 ， 并 将 box-pack 属性 设置 
为 center， 使 其 水 平 居中 显示 。 

医 国 06| 为 了 使 ul 中 的 元 素 垂直 排列 ， 需 要 将 box-orient 属性 设置 为 vertical。 代 码 
如 下 : 


-exw 
box-orient: vertical; 
width: 100px; 
height: 260px; 


} 

国 下 07| 此 时 将 box-pack 属性 设置 为 start 可 以 实现 垂直 顶部 对 齐 ， 将 box-pack 属 
性 设置 为 end 可 以 实现 垂直 底部 对 齐 。 
SS 国 轨 08】 在 浏览 器 中 运行 页 面 ， 会 看 到 4 种 对 齐 方式 的 效果 ， 如 图 13-12 所 示 。 
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横向 box-pack 属 性 为 start 横向 box-pack 属 性 为 center 


纵向 box-pack 属 性 为 start 纵向 box-pack 属 性 为 cod 


册 茶 加 寺 加 唱 6 SSO 才 引 EA 


图 13-12 ”box-pack 属 性 的 运行 效果 


(327 box-align 属 性 


box-align 属性 可 以 对 盒 模型 中 垂直 方向 上 的 剩余 空间 进行 管理 。 该 属性 实现 与 box- 
pack 属性 相反 的 效果 ， 基 本 语法 如 下 : 
box-align: start | end | center | baseline | stretch 
下 面 对 取 值 进行 说 明 。 
@ start: 所 有 子 元 素 沿 盒子 的 上 边缘 排列 ， 都 显示 在 盒子 的 上 部 ， 剩 余 空间 显示 在 
盒子 的 底部 。 
@ end: 所 有 子 元素 沿 盒子 的 下 边缘 排列 ， 都 显示 在 盒子 的 底部 ， 剩 余 空 间 显示 在 
盒子 的 上 部 。 
@ center: 剩余 空间 在 盒子 的 上 下 两 侧 平均 分 配 ， 即 上 面 一 半 ， 下 面 一 半 。 
@ ”baseline: 所 有 盒子 治 着 它们 的 基线 排列 ， 剩 余 空 间 可 前 可 后 显示 。 
@ stretch: 每 个 子 元 素 的 高 度 被 调整 到 适合 盒子 的 高 度 显 示 。 
例如 ， 将 上 节 示 例 中 的 box-pack 属性 替换 为 box-align 属性 ， 属 性 值 不 用 修改 。 再 次 
在 浏览 器 中 打开 ， 效 果 如 图 13-13 所 示 。 


图 13-13 ”box-align 属 性 的 运行 效果 
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(328 box-lines 属 性 


CSS 3 新 增 了 box-lines 属性 来 处 理 弹 性 布局 中 子 元 素 的 空间 游 出 问题 。box-lines 属性 
可 以 设置 子 元 素 是 否 可 以 换行 显示 。 其 语法 如 下 : 


box-lines: single | multiple 


常用 取 值 有 两 个 :single 表示 所 有 子 元 素 都 单行 或 者 单列 显示 ; multiple 表示 所 有 子 元 
素 可 以 多 行 或 者 多 列 显 示 。 
【 例 13.9】 
创建 一 个 示例 ， 演 示 如 何在 盒子 内 设置 子 元 素 分 行 显示 ， 以 避免 单行 显示 可 能 会 溢出 
盒子 空间 问题 ， 实 现 步骤 如 下 。 
鸭 玉 01| 在 页 面 添加 一 个 div 元 素 容器 ， 该 元 素 中 的 每 一 个 元 素 都 包含 一 张 图 片 。 
部 分 代码 如 下 : 
<div id="box"> 
<div><img src="images/1.png" /></div> 
<div><img src="images/2.png" /></div> 
<!-- 省 略 其 他 元 素 --> 
</div> 
设置 容器 元 素 显示 为 盒 型 ， 并 且 定 义 子 元 素 分 行 显示 。 主 要 样式 如 下 : 


#box { 
border: solid lpx red; 
width: 700px; 
height: 300px; 
display: box; 
box-lines: multiple; 


/* 省 略 兼 容 时 的 私有 属性 设置 */ 


鸭 罚 03| 运行 HTML 页 面 查看 效果 ，Opera 浏览 器 中 的 效果 如 图 13-14 所 示 。 
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图 13-14 ”box-lines 属 性 的 值 为 multiple 时 的 效果 


DN 


贱 注意 : 目前 ， 并 不 是 所 有 的 主流 浏览 器 都 提供 了 对 box-lines 属性 的 支持 ， 所 以 可 
能 会 导致 box-lines 属性 在 其 他 主流 浏览 器 中 显示 时 视 为 无 效 。 另 外 ，CSS 3 对 已 经 存在 
的 与 盒 模型 有 关 的 属性 ， 如 overflow、overflow-x、overflow-y 和 display 属性 ， 进 行 了 
变更 ， 读 者 可 以 查看 资料 。 
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13.3 ”新 增 的 界面 布局 属性 


除了 上 面 介绍 的 多 列 布局 和 盒 模型 方面 的 属性 ，CSS 3 还 新 增 了 很 多 与 用 户 界面 相关 
的 属性 。 它 们 用 来 控制 与 用 户 界 面相 关 效 果 的 呈现 方式 ， 解 决 了 用 户 界面 的 设置 问题 。 

本 节 罗 列 CSS 3 用 户 界 面 布 局 时 常用 的 5 个 属性 ， 分 别 是 box-sizing 属性 、resize 属 
性 、zoom 属性 、outline-offset 属性 和 nav-index 属性 。 


(G3.1 box-sizing 属 性 


在 网 页 布局 中 一 直 存 在 W3C 和 焉 两 种 盒 模型 ， 由 于 这 两 种 盒 模型 之 问 有 所 不 同 ， 导 
致 浏览 器 的 兼容 性 问题 一 直 存 在 。 为 了 解决 这 个 问题 ，CSS 3 对 盒 模型 进行 了 改进 ， 定 义 
了 box-sizing 属性 。box-sizing 属性 可 以 改变 容器 内 盒 模型 的 解析 方式 ， 其 语法 如 下 : 

box-sizing: content-box | border-box 

两 个 取 值 的 说 明 如 下 。 

(1) content-box， 表 示 标 准 模式 下 的 盒 模型 。 对 象 的 实际 宽度 的 计算 公式 如 下 : 

/* 外 盒 尺 寸 计算 (元 素 空间 尺寸 ) */ 

Element 空间 高 度 = content height + padding + border + margin 

Element 空间 宽度 = content width + padding + border + margin 

/* 内 盒 尺 寸 计算 (元素 大 小 ) */ 

Element Height = content height + padding + border (Height 为 内 容 高 度 ) 

Element Width = content width + padding + border (Width 为 内 容 宽 度 ) 

(2) border-box， 表 示 怪 异 模式 下 的 盒 模型 ， 即 正 盒 模型 。 对 象 的 实际 宽度 的 计算 公 
式 如 下 : 


/* 外 盒 尺 寸 计算 (元 素 空间 尺寸 ) */ 
Element 空间 高 度 = content Height + margin (Height 包含 了 元 素 内 容 宽 度 、 边 框 宽 


度 、 内 距 宽度 ) 

Element 空间 宽度 = content Width + margin (Width 包含 了 元 素 内 容 宽度 、 边 框 宽度 、 
内 距 宽度 ) 

/* 内 盒 尺 寸 计算 (元 素 大 小 ) */ 


Element Height = content Height (Height 包含 了 元 素 内 容 宽 度 、 边 框 宽度 、 内 距 宽 度 ) 

Element Width = content Width (Width 包含 了 元 素 内 容 宽 度 、 边 框 宽度 、 内 距 宽 度 ) 

假设 一 个 元 素 设 置 宽度 为 200px， 内 距 为 10px， 边 框 为 15px。 此 时 ， 将 该 元 素 的 box- a 
sizing 属性 值 设 为 content-box 的 效果 如 图 13-15 所 示 ， 将 该 元 素 box-sizing 属性 值 设 为 Sp A 
border-box 的 效果 如 图 13-16 所 示 。 仔 细 对 比 两 个 图 ， 会 看 出 标准 盒 模型 与 下 盒 模型 在 计 | 
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算 方式 上 的 区 别 。 


13-15 content-box 13-16 border-box 


【 例 13.10】 
创建 一 个 示例 ， 演 示 元 素 设置 box-sizing 属性 值 为 content-box 和 border-box 的 效果 。 
假设 有 如 下 HTML 页 面 : 
<div class="art"> 
<div><img src="images/Hydrangeas.jpg" /></div> 


</div> 
首先 指定 box-sizing 属性 的 值 为 content-box， 主 要 样式 如 下 : 
sart div' 1 
width: 500px; /* 宽度 */ 
float: left; 
padding: 10px; /* 填充 效果 */ 
border: 6px solid #999; /* 边框 效果 */ 
background: #eee; /* 背景 颜色 */ 


-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 


} 


添加 完成 后 的 页 面 效果 如 图 13-17 所 示 。 将 box-sizing 属性 的 值 修改 为 border-box， 此 
时 页 面 效 果 如 图 13-18 所 示 。 


13-18” 值 为 border-box 时 的 效果 
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(G32 resize 属 性 


resize 属性 是 CSS 3 中 新 增 的 一 个 非常 实用 的 属性 ， 它 用 于 设置 是 否 允许 用 户 调整 一 
个 元 素 的 尺寸 大 小 。resize 属性 的 语法 如 下 : 


resize: none | both | horizontal | vertical 


resize 属性 适用 于 所 有 overflow 属性 不 为 visible 的 元 素 ， 各 个 取 值 说 明 如 下 。 
none: 不 能 调整 元 素 的 尺寸 。 
@ ”both: 允许 调整 元 素 的 宽度 和 高 度 。 
@ ”horizontal: 允许 调整 元 素 的 宽度 。 
@ “vertical: 允许 调整 元 素 的 高 度 。 
【 例 13.11】 
假设 在 一 个 HTML 页 面 中 有 如 下 布局 代码 : 
<div> 发 表 评 论 : 
<textarea name="textfield" id="textfield"> 评 论 内 容 </textarea> 
<input type="submit" name="button" id="button" value=" 提 交 " /> 
</div> 
上 述 代码 显示 了 一 个 用 于 输入 评论 内 容 的 多 行文 本 框 ， 以 及 一 个 提交 按钮 。 下 面 为 该 
文本 框 添加 resize 属性 ， 允 许 用 户 调整 其 宽度 和 高 度 。 样 式 代码 如 下 : 
.art div textarea { 
-webkit-resize: both; 


resize: both; 
—webkit-overflow: scroll; 
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} 


在 浏览 器 中 运行 页 面 ， 文 本 框 右 下 角 会 有 一 个 可 拖 动 的 标识 。 如 图 13-19 所 示 是 调整 
尺寸 前 后 的 运行 效果 。 


D mA 
CO feJ//D /wwwRoot blog7 html 


WA " 
© DO fle///D/wwwRoot/blog7 html 


13-19 ”调整 尺寸 前 后 的 运行 效果 


地 注意 : 使 用 resize 属性 时 ， 必 须 定义 overflow 属性 的 值 ， 否 则 resize 属性 的 声明 

无 效 ， 因 为 元 素 默认 的 溢出 显示 为 visible。 另 外 ， 如 果 想 要 在 某 个 范围 内 自由 调整 宽度 
和 高 度 ， 可 以 分 别 设置 max-width 属性 和 max-height 属性 ， 它 们 分 别 用 于 设置 元 素 的 最 
大 宽度 和 最 大 高 度 。 
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13.3.3 zoom 属性 
zoom 属性 用 于 设置 对 象 的 缩放 比例 ， 语 法 如 下 : 


zoom: normal | <number> | <percentage> 


zoom 属性 适用 于 所 有 元 素 ， 取 值 说 明 如 下 。 

@ normal: 表示 使 用 对 象 的 实际 尺寸 。 

@ number: 用 浮 点 数 来 定义 缩放 比例 ， 它 不 允许 负 值 。 
@ percentage: 用 百分比 来 定义 缩放 比例 ， 它 不 允许 负 值 。 
【 例 13.12】 

假设 在 一 个 HTML 页 面 中 有 如 下 布局 代码 : 


<div class="art"> 
<div><a href="#"><img src="images/Hydrangeas.jpg" width="200" /></a> 
</div> 
<div><a href="#"><img src="images/Jellyfish.jpg" width="200" /></a> 
</div> 
<div><a href="#"><img src="images/Koala.jpg" width="200" /></a></div> 
<div><a href="#"><img src="images/Lighthouse.jpg" width="200" /></a> 
</div> 
<div><a href="#"><img src="images/Penguins.jpg" width="200" /></a> 
</div> 

</div> 


下 面 使 用 zoom 属性 实现 鼠标 移 到 图 片上 时 将 图 片 放大 1.5 倍 。 样 式 代码 如 下 : 


.art a:hovert{ 
Zoom: 150%; 


} 
在 浏览 器 中 运行 HTML 页 面 ， 查 看 效果 ， 把 鼠标 悬浮 到 图 片 时 的 放大 效果 如 图 13-20 
所 示 。 


人 人 x 司 
© DO file///D/ wwwRoot/blog8 html 


13-20 ”zoom 属性 的 运行 效果 


( 3.3.4 ”outline-offset 属 性 
在 CSS 2 中 可 以 使 用 outline 属性 定义 块 元 素 的 外 边框 线 ， 其 语法 如 下 : 


outline: [outline-color] | [outline-style] | [outline-width] 


上 述 3 个 取 值 分 别 用 于 定义 边框 的 颜色 、 样 式 和 宽度 ， 取 值 说 明 如 下 。 

@ ”outline-color 定义 边框 颜色 ， 可 接受 所 有 的 颜色 。 

@ ”outline-style: 定义 边框 的 样式 ， 与 border-style 属性 的 取 值 相同 。 

@ outline-width: 定义 边框 的 宽度 ， 与 border-width 属性 的 取 值 相同 。 

为 了 可 以 更 加 灵活 地 控制 外 边框 线 ，CSS 3 中 新 增 了 outline-offset 属性 。 该 属性 用 于 
设置 对 象 的 外 边框 线 偏 移 容器 的 值 ， 适 用 于 所 有 元 素 。 语 法 如 下 : 


outline-offset: <length> 


outline-offset 属性 的 取 值 是 由 浮 点 数 和 标识 符 组 成 的 长 度 值 ， 它 允许 使 用 负 值 。 取 值 
如 果 为 零 ， 表 示 以 border 边界 作为 参考 点 ， 正 值 表示 从 border 边界 往外 延 ， 负 值 表示 从 
border 边界 往 里 缩 。 

【 例 13.13】 

假设 HTML 页 面 中 有 一 个 留言 表单 用 于 输入 姓名 、 联 系 方式 、 标 题 和 留言 内 容 。 首 先 
为 页 面 中 的 文本 框 添加 一 个 样式 ， 实 现在 输入 内 容 时 显示 一 个 边框 线 。 样 式 代码 如 下 : 

input [type="text"] :focus{ 

outline: #FF0 solid Spx; 

} 

在 浏览 器 中 运行 页 面 ， 效 果 如 图 13-21 所 示 。 继 续 向 输入 框 中 添加 样式 ， 通 过 outline- 
offset 属性 指定 获取 焦点 时 的 外 边框 线 。 样 式 代码 如 下 : 

input [type="text"] :focus{ 


outline: #FF0 solid Spx; 
outline-offset: 10px; 


} 
再 次 运行 HTML 页 面 ， 此 时 的 效果 如 图 13-22 所 示 。 
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(33.5 nav-index 属 性 


中 新 增加 了 nav-index 属性 来 代替 tabindex 属性 。nav-index 属性 的 语法 如 下 : 


nav-index: auto | <number> 


auto 值 表示 使 用 浏览 器 默认 的 顺序 ，number 值 是 一 个 正 整数 ， 该 数 指定 了 元 素 的 导航 
顺序 。 
默认 情况 下 ， 在 浏览 器 中 使 用 Tab 键 可 以 正 向 按 顺序 导航 ， 通 过 Shift+Tab 组 合 键 可 
以 反 向 导航 。 因 此 为 了 使 浏览 器 按 顺序 获取 焦点 ， 页 面 元 素 需 要 遵循 以 下 规则 : 
@ ”该 元 素 支 持 nav-index 属性 ， 而 被 赋予 正 整数 属性 值 的 元 素 将 会 被 优先 导航 。 
@ 浏览 器 将 按照 nav-index 值 按 从 小 到 大 的 顺序 进行 导航 。 如 果 多 个 元 素 的 优先 级 
相同 ， 则 按照 定义 顺序 进行 导航 。 
@ ”对 于 不 支持 nav-index 属性 或 者 nav-index 属性 值 为 auto 的 元 素 ， 将 以 它们 在 文档 
流 中 出 现 的 顺序 进行 导航 。 
e@ ”对 那些 禁用 的 元 素 ， 将 不 参与 导航 。 


13.4 本 章 习 题 


1. 填空 题 

(1) CSS 3 中 设置 每 列 固 定 宽度 使 用 的 属性 是 : 

(2) CSS 3 中 将 标题 横 跨 多 行 的 属性 是 

(3) 属性 用 于 设置 弹性 盒 模 型 中 子 元 素 的 排列 方式 。 

(4) CSS 3 新 增 的 弹性 布局 中 属性 用 于 管理 空间 溢出 。 

(5) CSS 3 中 新 增 的 属性 可 使 页 面 上 的 元 素 允 许 用 户 调整 其 大 小 。 


2. 选择 题 
(1) 下 列 不 属于 复合 属性 的 是 


A. columns B. box-orient C. column-mle D. outline-offset 
(2) 下 面 的 选择 中 ， 属性 是 CSS 3 中 新 增 的 弹性 盒 模型 属性 。 

A. overflow B. box-direction C. display D. overflow-y 
(3) CSS 3 中 使 用 属性 设置 每 列 之 间 的 间隔 距离 。 

A. column-width B. column-rmle-width 

C. column-gap DD tiv 
(4) 想 要 将 标题 横 跨 多 列 并 且 在 中 间 显示 ， 可 以 使 用 哪 种 办 法 解决 ? 

A. outlne-width B. column-gap 


C. column-count D. column-span 


DN 


3. 上 机 练习 
根据 本 章 学 习 的 知识 ， 使 用 CSS 3 中 多 列 布局 的 相关 属性 ， 设 计 一 个 以 列表 形式 展现 
的 相册 浏览 页 面 ， 参 考 效 果 如 图 13-23 所 示 。 
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通过 前 面 章节 的 学 习 ， 相 信 读 者 已 经 体会 到 了 CSS 3 的 强大 。 除 了 前 面 介绍 
的 功能 外 ，CSS 3 还 可 以 实现 元 素 的 颜色 渐变 、 过 渡 、 平 移 以 及 动画 等 功能 。 在 
介绍 HTML 5 中 新 增加 的 绘图 canvas 元 素 时 ， 曾 经 介绍 过 如 何 使 用 上 下 文 对 象 
绘制 出 渐变 图 形 和 变换 (例如 平移 、 缩 放 和 旋转 ) 图 形 。 实 际 上 ，CSS 3 中 新 增加 
了 一 些 属性 ， 通 过 设置 这 些 属性 ， 也 可 以 实现 渐变 、 平 移 、 缩 放 和 旋转 等 效果 。 

通过 未 章 的 学 习 ， 读 者 不 仅 可 以 掌握 新 增 的 渐变 属性 ， 还 可 以 掌握 CSS 3 中 
新 增 的 与 转换 二 过 注 和 动画 有 关 的 属性 。 


本 章 学 习 目 标 : 

掌握 线性 渐变 的 实现 
掌握 径 向 渐变 的 实现 
掌握 2D 转换 的 常用 方法 
熟悉 3D 转换 的 常用 方法 
掌握 与 过 渡 有 关 的 属性 
掌握 transition 属性 的 使 用 
熟悉 与 动画 有 关 的 属性 
掌握 @keyframes 的 使 用 
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14.1 渐变 特效 


渐变 背景 是 网 页 设计 中 不 可 或 缺 的 审美 元 素 ， 一 直 以 来 ， 网 页 设计 者 必须 依赖 现成 的 
图 片 来 实现 渐变 背景 效果 ， 这 是 一 种 策 拙 的 方法 。CSS 3 新 增加 了 与 渐变 有 关 的 属性 ， 通 

基于 CSS 的 渐变 与 图 片 渐变 相 比 ， 最 大 的 优点 在 于 方便 修改 ， 同 时 支持 无 级 操作 ， 而 
且 过 渡 更 加 自然 。 


(a1.1 线性 渐变 


线性 渐变 是 沿 着 一 根 轴线 (水 平 或 垂直 ) 改 变 颜 色 ， 从 起 点 到 终点 颜色 进行 顺序 渐变 (从 
一 边 拉 向 另 一 边 )。CSS 3 中 使 用 linear-gradient 属性 实现 线性 渐变 的 功能 ， 该 属性 的 基本 
语法 如 下 : 

linear-gradient( [<point> || <angle>,]? <stop>，<stop> [, <stop>]* ) 7 

目前 ，CSS 渐变 设计 还 没有 一 个 统一 的 标准 ， 用 法 差异 很 大 ， 不 同 引 擎 实现 渐变 的 语 
法 不 同 ， 均 为 私有 属性 。 例 如 ， 下 面 列 出 了 不 同 引 擎 下 实现 渐变 时 需要 添加 的 私有 属性 : 

//Webkit 引擎 

-webkit-1linear-gradient ([<point>||<angle>, ] ?<stop>, <stop>[,<stop>]*); 

//Gecko 引擎 

-moz-linear-gradient ([<point>||<angle>, ] ?<stop>,<stop>[,<stop>]*); 

//Presto 引擎 

-0o-linear-gradient ([<point>||<angle>, ] ?<stop>, <stop>[,<stop>]*); 

无 论 使 用 哪 种 泻 染 引擎 ， 其 使 用 linear-gradient 属性 的 语法 都 是 一 致 的 。 在 使 用 linear- 
gradient 属性 时 ， 需 要 向 该 属性 中 传 入 3 个 参数 。 其 中 ， 第 一 个 参数 表示 线性 渐变 的 方向 
或 角度 ，top 是 从 上 到 下 、left 是 从 左 到 右 ， 如 果 定 义 成 left ttp， 那 就 表示 从 左上 角 到 右 下 


角 ; 第 二 个 参数 和 第 三 个 参数 分 别 是 起 点 颜色 和 终点 颜色 ， 还 可 以 在 它们 之 间 插 入 多 个 参 
数 ， 表 示 多 种 颜色 的 渐变 。 
【 例 14.1】 


为 显示 古诗 的 div 元 素 添加 背景 颜色 ,实现 颜色 为 红色 到 蓝 色 的 渐变 。 步 又 如 下 。 
国 01] 向 页 而 中 添加 div 元 素 ， 该 元 素 包含 hl 和 p 两 个 元 素 。hl 显示 古诗 标题 ， 
Pp 显示 古诗 内 容 。 页 面 代 码 如 下 : 
<div class="demo" > 
<h1> 蜀 相 </h1> 
<p> 孙 相 祠 堂 何 处 寻 ， 锦 官 城 外 柏 森 森 。<br/><br/> 映 阶 碧 草 自 春色 ， 隔 叶 黄 酷 空 好 音 。 
<br/><br/> 
三 顾 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 。<br/><br/> 出 师 未 捷 身 先 死 ， 长 使 英雄 泪 满 襟 。 
<br/><br/></p> 
</div> 


为 上 述 步骤 中 的 div 元 素 添加 样式 ， 指 定 div 元 素 的 宽度 、 边 框 、 高 度 、 填 


CD 


充 距离 、 字 体 大 小 、 字 体 颜色 、 字 体 间距 以 及 背景 等 内 容 。 代 码 如 下 : 


.demo { 
width: 95%; 
border: lpx solid #ccc; 
height: 200px; 
padding: 10px; 
text-align: center; 
font-size: 14px; 
letter-spacing: 2px; 
color: white; 
background: -webkit-linear-gradient (top, red,blue); /*Chrome 等 浏览 器 */ 
background: -moz-linear-gradient (top, red,blue); /*Firefox 等 浏览 器 */ 
background: -o-linear-gradient (top, red,blue); 
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} 
在 浏览 器 中 运行 上 述 代码 ， 查 看 渐变 效果 ， 如 图 14-1 所 示 。 
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14-1 两 种 颜色 的 渐变 效果 


区 当 04| 更改 上 述 代码 ， 继 续 添加 样式 ， 通 过 linear-gradient 指定 多 个 渐变 颜色 ， 从 
左上 角 到 右 下 角 进 行 渐变 ， 渐 变 颜 色 从 red 到 white 到 yellow 再 到 blue， 同 时 指 
定 古 诗 字 体 颜 色 为 黑色 。 部 分 样式 如 下 : 

.demo { 

/* 省 略 其 他 样式 */ 

color: black; 

background: -webkit-linear-gradient (left top, red,white,yellow,blue); 

background: -moz-linear-gradient (left top,red,white,yellow,blue); 


background: -o-linear-gradient (left top, red,white, yellow,blue); 
} 


国 轨 05| 重新 运行 上 述 代码 ， 查 看 渐变 效果 ， 如 图 14-2 所 示 。 


2 最 在 指定 颜色 渐变 时 ， 除 了 可 以 直接 使 用 颜色 的 英文 名 称 外 ， 还 可 以 使 用 十 
六 进 制 、RGBA 和 HSLA 等 单位 进行 表示 ， 感 兴趣 的 读者 可 以 亲自 动手 试 一 试 。 

在 Webkit 泻 染 引擎 下 有 两 种 方式 ， 上 面 介 绍 的 是 最 新 的 一 种 发 布 方式 ， 还 有 一 种 老 fp CK 
式 的 语法 。 | 
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蜀 相 
丞相 祠堂 何 处 寻 ， 锦 官 城 外 柏 森森 * 
映 阶 匠 草 自 春色 ， 隔 叶 黄 一 空 好 音 。 
三 顾 频 烦 天 下 计 ， 两 朝 开 济 老臣 心 。 
出 师 未 捷 身 先 死 ， 长 使 英雄 泪 满 襟 。 


14-2 ”多 种 颜色 的 渐变 效果 


老式 语法 如 下 : 

-webkit-gradient (<type>, <point> [, <radius>]?, <point> [, <radius>]? [, 

<stop>]*) // 老 式 语法 书写 规则 

Webkit 泻 染 的 老式 渐变 是 通过 -webkit-gradient 实现 的 ， 它 需要 传 入 多 个 参数 ， 参 数 说 

明 如 下 。 

@ ”<type>: 定义 渐变 的 类 型 ，linear 表示 线性 渐变 ，radial 表示 径 向 渐变 。 

@ ”<point>: 定义 渐变 起 始点 和 结束 点 坐标 ， 即 开始 应 用 渐变 的 X 轴 和 Y 轴 坐 标 ， 
以 及 结束 渐变 的 坐标 。 它 的 参数 支持 数值 、 百 分 比 和 关键 字 ， 例 如 (0,0) 或 者 
(left,top) 等 。 关 键 字 包括 top、bottom、left 和 right。 
<radius>: 当 定 义 径 向 渐变 时 ， 用 来 设置 径 向 渐变 的 长 度 ， 该 参数 为 一 个 数值 。 
<stop>: 定义 渐变 色 和 步 长 ， 包 括 3 个 类 型 值 ， 说 明 如 下 。 

4 ”开始 的 颜色 : 使 用 from(color value) 函 数 进行 定义 。 

# 结束 的 颜色 : 使 用 to(color value) 函 数 进行 定义 。 

4 颜色 步 长 : 使 用 color-stop(value，color value) 定 义 。color-stop() 函 数 包含 两 个 
参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范围 为 0~1.0( 或 者 
0%~100%); 第 二 个 参数 值 表示 任意 的 颜色 值 。 


【 例 14.2】 
重新 定义 例 14.1 中 的 样式 内 容 ， 通 过 -webkit-gradient 实现 #9F0 ~ 本 CF 的 颜色 渐变 。 
代码 如 下 : 
.demo { 
/* 省 略 其 他 样式 */ 


color: white; 
background: 
—webkit-gradient (linear, center top,center bottom,from(#9F0),to(#FCF)); 


运行 本 例 的 代码 ， 查 看 渐变 效果 ， 如 图 14-3 所 示 。 


线性 浙 变 x 
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14-3 ”#9F0 ~ #FCF 的 颜色 渐 变 


可 以 直接 定义 步 长 ， 而 不 通过 fom0 和 to0 进 行 指 定 。 代 码 如 下 : 
.demo { 
/* 省 略 其 他 样式 */ 
color: white; 
background: -webkit-gradient (linear,center top,center bottom, 


color-stop(0.3,blue), color-stop (0.7,orange)); 
} 


重新 运行 上 述 代码 查看 渐变 效果 ， 如 图 14-4 所 示 。 
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图 14-4 ”color-stop() 的 使 用 


还 可 以 将 from()、to0 与 color-stop0 结 合 起 来 使 用 ， 实 现 多 重 渐变 。 样 式 代码 如 下 : 


.demo { 
/* 省 略 其 他 样式 */ 
color: white; 
background: -webkit-gradient (linear,center top, 
center bottom,from(#9F0),to(#FCF), color-stop (0.3,blue), 
color-stop(0.7,orange)); 


} 
继续 运行 上 述 代 码 ， 查 看 渐变 效果 ， 如 图 14-5 所 示 。 
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14-5 多 重 渐 变 的 实现 


(4.1.2 径 向 渐变 


径 向 渐变 是 指 从 起 点 到 终点 、 颜 色 从 内 到 外 进行 圆 形 渐变 (从 中 间 向 外 拉 )。CSS 3 新 
增 radial-gradient 实现 径 向 渐变 ， 基 本 语法 如 下 : 


-webkit-radial-gradient ([<point> || <angle>,]? [<shape> || <size>,]? 
<stop>, <stop>[, <stop>]*) 

-moz-radial-gradient ([<point> || <angle>,]? [<shape> || <size>,]? 
<stop>, <stop>[, <stop>]*) 

-o-radial-gradient ([<point> || <angle>,]? [<shape> || <size>,]? 


<stop>, <stop>[, <stop>]*) 


上 述 语 法 中 ，point 表示 定义 渐变 的 起 始点 ;，angle 定义 渐变 的 角度 ;shape 定义 渐变 的 
形状 ， 它 的 值 包含 circle( 圆 ) 和 ellipse( 椭 贺 ， 默 认 值 );，size 定义 圆 半径 ， 或 者 椭圆 的 轴 长 
度 ， 通 过 closest-side、closest-comer、farthest-side、farthest-comer、contain 和 cover 等 关键 
字 定 义 ; stop 表示 可 以 调用 color-stop0 函 数 定义 步 长 。 

【 例 14.3】 

本 例 继续 利用 前 面 的 页 面 ， 为 古诗 背景 添加 径 向 渐变 的 效果 。 实 现 步骤 如 下 。 

向 页 面 中 添加 div 元 素 ， 该 元 素 包 含 hl 和 p 两 个 元 素 ， 页 面 代码 可 以 参考 

例 14.1 中 的 步骤 01。 

添加 简单 的 径 向 渐变 ， 渐 变 的 开关 为 圆 形 ， 渐 变 的 形式 是 从 黄色 到 蓝 色 。 

主要 样式 如 下 : 

.demo { 

/* 省 略 其 他 样式 */ 


color: white; 
background: -webkit-radial-gradient (circle, yellow,blue); 


} 

国 轨 03| 在 浏览 器 中 运行 上 述 页 面 ， 查 看 效果 ， 如 图 14-6 所 示 。 

苞 玫 04| 更 改 上 述 样式 代码 ， 再 次 实现 径 向 渐变 ， 形 状 为 椭圆。 从 中 间 向 外 由 红色 、 
绿色 到 蓝 色 渐变 显示 ， 并 设置 渐变 尺寸 为 cover 关键 字 。 代 码 如 下 : 


.demo { 


/* 省 略 其 他 样式 */ 


N 


color: white; 
background: -webkit-radial-gradient (ellipse cover,red,green,blue); 


一 
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14-6 ” 径 向 渐变 效果 1 


重新 运行 上 述 代码 ， 查 看 效果 ， 如 图 14-7 所 示 。 


14-7” 径 向 渐变 效果 2 


在 Webkit 演 染 引擎 下 ， 可 以 直接 通过 -webkit-gradient 实现 径 向 渐变 ， 在 实现 径 向 渐变 
需要 指定 两 个 圆 ， 包 括 圆 心 坐标 和 半径 长 度 。 
【 例 14.4】 
下 面 使 用 -webkit-gradient 实现 一 个 径 向 渐变 ， 圆 心 坐 标 为 (200,100)， 内 圆 半 径 为 10， 
外 圆 坐 标 为 100， 内 圆 小 于 外 圆 半径 ， 从 内 圆 浅 蓝 色 到 外 圆 绿 色 径 向 渐变 ， 超 出 外 圆 半 径 
显示 为 绿色 ， 内 圆 显 示 为 浅 蓝 色 。 样 式 如 下 : 
.demo { 
/* 省 略 其 他 样式 */ 
Coo DEAacks 


background: -webkit-gradient (radial,200 100,10,200 100,100, 
from(1ightblue) ,to(green) ) > 


时 


} 

上 述 代 码 在 实现 径 向 渐变 的 效果 时 ， 径 向 渐变 的 起 点 坐标 (200,100) 和 结束 坐标 (2 
(200.100) 分 别 定义 内 圆 和 外 圆 坐标 ， 这 里 指定 的 坐标 相同 ， 是 一 个 同心 圆 。 定 义 坐 标 时 还 CA 
指定 了 内 圆 和 外 圆 的 半径 ，from 和 to 分 别 指定 渐变 开始 和 结束 时 的 颜色 。 在 浏览 器 中 运 SU/ 
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行 上 述 代 码 ， 查 看 径 向 渐变 效果 ， 如 图 14-8 所 示 。 


esen >| 


EE 
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14-8”-webkit-gradient 实 现 径 向 效果 


起 提示 : 在 实现 渐变 时 ， 有 一 种 特殊 的 渐变 一 一 重复 渐变 ， 重 复 渐 变 就 是 将 渐变 的 
效果 在 元 素 中 重复 显示 。 读 者 在 实现 重复 线性 渐变 和 重复 径 向 渐变 的 效果 时 ， 需 要 分 别 
使 用 repeating-linear-gradient 属性 和 repeating-radial-gradient 属性 。 读 者 可 以 亲自 动手 练 
习 使 用 这 两 个 属性 ， 这 里 不 再 详细 说 明 。 


14.2 转 换 


转换 是 使 元 素 改变 形状 、 尺 寸 和 位 置 的 一 种 效果 。 通 过 CSS 3 转换 ，Web 设计 者 能 够 
对 元 素 进行 移动 、 缩 放 、 转 换 、 拉 长 或 者 拉 伸 。 


(42.1 2D 转 换 


Web 开发 者 可 以 通过 2D 或 者 3D 来 转换 元 素 ，CSS 3 中 新 增 的 转换 属性 包含 
transform 和 transform-origin 两 个 。transform 属性 向 元 素 应 用 2D 或 者 3D 转换 ，transform- 
origin 属性 允许 改变 被 转换 元 素 的 位 置 。 除 了 这 两 个 属性 外 ， 还 提供 了 多 个 方法 ， 表 14-1 
列 出 了 一 些 2D 转换 方法 。 

表 14-1 2D 转换 方法 


方法 名 称 说 明 
matrixCnnnnnn) 定义 2D 转换 ， 使 用 6 个 值 的 矩阵 
translate(x,y) 定义 2D 转换， 沿 着 义 轴 和 YY 轴 移 动 元 素 
translateX(n) 定义 2D 转换 ， 沿 着 X 轴 移 动 元 素 
> translateY(n) 定义 2D 转换 ， 沿 着 立轴 移动 元 素 
scale(x,y) 定义 2D 缩放 转换 ， 改 变 元 素 的 宽度 和 高 度 
scaleX(n 定义 2D 缩放 转换 ， 改 变 元 素 的 宽度 
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多 
第 
续 表 Eg 
方法 名 称 说 明 
scaleY(n 定义 2D 缩放 转换 ， 改 变 元 素 的 高 度 3 
Totate(angle 定义 2D 旋转 ， 在 参数 中 规定 角度 和 
skew(x-angle,y-angle) 定义 2D 倾斜 转换 ， 沿 着 义 轴 和 YY 轴 荔 
ce 定义 2D 倾斜 转换 ， 沿 着 四 芝 
skewY(anple 定义 2D 倾斜 转换 ， 沿 着 立轴 
1.，translate() 方 法 
translate()、translateX() 和 translateY0 方 法 都 可 以 实现 平移 的 效果 ， 通 过 translate() 方 
法 ， 元 素 可 以 从 当前 位 置 移动 到 另 一 位 置 。 在 移动 时 ， 需 要 根据 指定 的 X 坐标 和 Y 坐标 
进行 移动 ， 移 动 效果 如 图 14-9 所 示 。 在 该 图 中 ， 实 线 表示 平移 前 的 元 素 ， 虚 线 表示 平移 后 
的 元 素 。 
14-9 translate() 方 法 平移 的 效果 
【 例 14.5】 
在 先前 的 示例 中 ， 显 示 古 诗 信息 时 ， 通 过 text-align 属性 设置 文本 内 容 居 中 显示 。 现 
在 ， 为 了 演示 translate0 方 法 的 实现 效果 ， 通 过 平移 将 古诗 内 容 居 中 。 实 现 步 又 如 下 。 
向 页 面 中 添加 div 元 素 ， 该 元 素 包含 hl 元 素 和 op 元素。hl 元 素 显示 古诗 标 
题 ，p 元 素 显 示 古 诗 内 容 。 
步骤 [加 为 div 元 素 指 定 宽度 、 高 度 、 字 体 颜色 和 渐变 背景 等 属性 。 部 分 代码 如 下 
所 示 : 
.demo { 
Width: 95%2 
border: lpx solid #ccc; 
height: 200px; 
color: black; 
background: -webkit-linear-gradient (top, #FFB,#A6FFA6) ; /*Chrome 等 浏览 器 */ 
/* 省 上 略 其 他 样式 */ 
} 
在 浏览 器 中 运行 页 面 ， 查 看 默认 情况 下 的 显示 效果 ， 如 图 14-10 所 示 。 SP 
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= -ms 


划 相 

圣 相 和 祠堂 何 处 县， 锦 襄 城 外 柏 查 栖 。 
瑞 鸯 百草 自 音色 ， 陋 叶 商 一 空 好 音 
三 大 频 烦 天 下 计 ， 两 桐 开 济 老臣 心 。 
出 师 未 掩 身 先 死 ， 长 使 英雄 寻 漂 借 


14-10 ”页 面 初始 效果 


. 为 页 面 中 的 hl 元 素 和 p 元 素 设计 样式 ， 通 过 translate0 方 法 实现 平移 效 
果 。 代 码 如 下 : 


.demo hl{ 
transform: translate(300px, Opx); 
-moz-transform: translate(300px, 0px); 
-webkit-transform: translate(300px,0px); 
-o-transform: translate(300px,0px); 


} 

.demo pi{ 
transform: translate(200px, Opx); 
-moz-transform: translate(200px, Opx); 
-webkit-transform: translate(200px,0px); 
-o-transform: translate(200px, Opx); 


} 
刷新 页 面 ， 查 看 平移 效果 ， 如 图 14-11 所 示 。 


ardste0 方 入 
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罚 相 
于 相同 寞 何 处 寻 ， 键 言 逢 外 柏 查 碍 ， 
欢 阶 娄 莒 自 春色 ， 限 时 商 动 空 好 自 - 
三 硕 须 炳 天 下 计 ， 两 朝 开 济 老 臣 心 - 
出 师 未 撞 身 寺 死 ， 长 使 英 鹿 酒 丙 森 ， 


14-11 平移 后 的 效果 


2. rotate() 方 法 


通过 rotate0 方 法 ， 元 素 顺 时 针 旋 转 给 定 的 角度 。 该 方法 中 的 参数 允许 传 入 负 值 ， 传 入 
负 值 时 元 素 将 逆 时 针 旋 转 。 

【 例 14.6】 

继续 利用 前 面 页 面 中 的 古诗 页 面 进行 更 改 ， 指 定 古 诗 内 容 逆 时 针 旋转 5 度 。 以 Webkit 
泻 染 引擎 为 例 。 样 式 代码 如 下 : 


N 


奴 
第 
.demo pi{ 全 
-webkit-transform: rotate (-5deg) 章 
} 
9 
重新 运行 本 次 示例 的 代码 ， 观 察 旋转 效果 ， 如 图 14-12 所 示 。 团 
Co 
owte0 方 法 = 加 
€ 3 © DO file//D/htmls/highoper/sichtml 三 划 
蜀 相 
EPTFE 全 冯 坟 外 地 并 可。 
吉 队 春草 自 要 鱼 ， 限 对 入 了 字 生 间 
三 册 组 伏天 下 计 ， 匀 明天 二 老 攻 
ET TE 长 但 天 这 弄 久生 
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3. scale() 方 法 


通过 scale() 方 法 ， 元 素 的 尺寸 会 增加 或 者 减少 。 使 用 scaleO 时 需要 传 入 两 个 参数 ， 根 
据 给 定 的 宽度 (X 轴 ) 和 高 度 (Y 轴 ) 实 现 缩放 。 
【 例 14.7】 
本 例 通过 scale() 方 法 实现 图 片 的 缩放 ， 用 户 可 以 根据 网 页 中 的 滑 块 查看 缩放 效果 。 实 
现 步 骤 如 下 。 
妙 玉 01| 向 页 面 中 添加 两 个 range 类 型 的 input 元 素 、 一 个 button 按钮 、 一 个 span 
元 素 以 及 一 个 img 元 素 。 其 中 ，range 类 型 的 input 元 素 显 示 滑 块 效果 ，button 按 
钮 执行 操作 ，span 元 素 显 示 当 前 XX 轴 和 YY 轴 的 缩放 值 ，img 元 素 显示 图 片 。 具 体 
代码 如 下 : 
X 轴 : <input id="myx" type="range" min="0.5" max="3" step="0.1" value="1" 
onChange="ChangeScale()" /> 
Y 轴 : <input id="myy" type="range" min="0.5" max="3" step="0.1" value="1" 
onChange="ChangeScale ()" /> 
<input id="myb" type="button" value=" 恢 复 正 常 " onClick="ChangeNormal()" /> 
<span id="show"></span><br/><br/> 
<img id="myimg" src="images/first.jpg" width="300" height="200"> 
国事 02] 从 上 个 步骤 中 可 以 看 出 ， 为 滑 块 和 按钮 分 别 指定 了 onChange 和 onClick 两 
个 事件 属性 。 当 改变 滑 块 的 值 时 会 调用 ChangeScale0) 函 数 获 取 滑 块 的 值 ， 并 且 将 
值 显示 到 页 面 ， 同 时 对 图 片 进行 缩放 。ChangeScale0 函 数 的 代码 如 下 : 


function ChangeScale(){ 


var x = document .getElementById ("myx") .value; //X 轴 缩放 值 
Var y = document .getElementByYId ("myy") .value; //Y 轴 缩放 值 
var img = document.getElementByYId ("myimg") > //img 对 象 
img.style.webkitTransform = "scale("+x+","+y+")"; // 实 现 缩放 效果 


document .getElementById ("show") .innerHTML = "X 轴 : "+x+",Y 轴 : "+y; 
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单 击 按钮 时 会 触发 Click 事件 调用 ChangeNormal0 函 数 ， 该 函数 将 恢复 图 
片 的 原始 尺寸 。 代 码 如 下 : 


function ChangeNormal (){ 
Var img = document .getElementById ("myimg"); 
img.style.webkitTransform = "scale(1,1)"; 


本 
在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 初 始 效果 和 单 击 “ 恢 复 正 常 ”按钮 
时 的 效果 一 致 ， 如 图 14-13 所 示 。 


[= | © lm 
六 scale0 方 法 x 
G | @ file:///D:/htmls/highoper/seven.html 如 三 
疯 ; 


14-13 ”初始 效果 


拖 动 图 14-13 中 的 滑 块 对 图 片 进行 缩放 ，X 轴 扩 大 到 原 宽度 的 1.4 倍 , 立轴 
为 原 高 度 的 一 半 ， 效 果 如 图 14-14 所 示 。 


站 scale0 方 法 x\ 
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Xx 址 : L 击 : | 恢复 正常 | x 轴 : 1 4.Y 轴 : 0.5 


14-14 ”缩放 效果 


起 提示 : 通过 JavaScript 更 改变 换 或 者 过 渡 等 效果 时 ， 由 于 泻 染 引擎 不 同 ， 因 此 需 
本 要 添加 不 同 的 私有 属性 。 该 示例 以 Webkit 引擎 为 例 ， 将 样式 中 的 -webkittransform 更 改 
2 江 为 webkitTransform 属性 。 如 果 浏 览 器 使 用 Gecko 引擎 ， 那 么 JavaScript 中 应 该 使 用 


ImozTransform 属性 。 


4. skew() 方 法 


通过 skew0 方 法 ， 元 素 翻 转 给 定 的 角度 。 使 用 时 需要 传 入 两 个 参数 ， 这 两 个 参数 分 别 
表示 治 着 水 平和 垂直 方向 倾斜 。 其 中 ， 第 二 个 参数 可 以 省 略 ， 省 略 该 参数 时 ， 默 认 值 
为 0。 

【 例 14.8】 

直接 向 页 面 中 添加 一 张 图 片 ， 页 面 显 示 时 实现 翻转 功能 。 通 过 skew(20deg,10deg) 指 定 
围绕 X 轴 把 元 素 翻转 20 度 ， 围 绕 立轴 翻转 10 度 。 样 式 代码 如 下 : 

#myimg{ 

transform: skew(30deg,20deg); 


-webkit-transform: skew(20deg,10deg); 
/* 省 略 其 他 私有 属性 的 设置 */ 


} 
在 浏览 器 中 访问 本 示例 的 页 面 ， 查 看 翻转 效果 ， 如 图 14-15 所 示 。 


| 
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14-15 图片 的 翻转 效果 


(422 3D 转 换 


3D 是 3 Dimensions 的 简称 ， 中 文 可 称 为 三 维 、 三 个 维度 或 者 三 个 坐标 ， 即 有 长 、 
宽 、 高 。CSS 3 中 新 增 了 实现 3D 转换 的 属性 和 方法 ， 表 14-2 和 表 14-3 分 别 对 这 些 属性 和 
方法 进行 说 明 。 
表 14-2 3D 转换 的 属性 


属性 名 称 说 阴 
transform 向 元 素 应 用 2D 或 3D 转换 
transform-ori 允许 改变 被 转换 元 素 的 位 置 


指定 被 柑 套 元 素 如 何在 3D 空间 中 显示 。 其 值 包 括 flat 和 preserve-3d 


transform-style 


perspective 指定 3D 元 素 的 透视 效果 
rspective-origi 指定 3D 元 素 的 底部 位 置 
backface-visibility 定义 元 素 在 不 面 对 屏 幕 时 是 否 可 见 
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表 14-3 3D 转换 的 方法 


方法 名 称 说 明 
matrix3dnm.nnnnnnnnnnnnnnn) 定义 3D 转换 ， 使 用 16 个 值 的 4x4 矩阵 
translate3d(x,y,2, 定义 3D 转换 
translateX(x) 定义 3D 转换 ， 仅 使 用 用 于 义 轴 的 值 
translateY(y) 定义 3D 转换 ， 仅 使 用 用 于 立轴 的 值 
translateZ(Z 定义 3D 转换 ， 仅 使 用 用 于 Z 轴 的 值 
scale3d(x,y,z 定义 3D 缩放 转换 
scaleX(x) 定义 3D 缩放 转换 ， 通 过 给 定 一 个 和 X 轴 的 值 
ScaleY 定义 3D 缩放 转换 ， 通 过 给 定 一 个 立轴 的 值 
scaleZ(2z) 定义 3D 缩放 转换 ， 通 过 给 定 一 个 Z 轴 的 值 
rotate3d(x,y,z,angle) 定义 3D 旋转 
iotateX(angle 定义 沿 X 轴 的 3D 旋转 
iotateY(angle 定义 沿 立轴 的 3D 旋转 
rotateZ(angle) 定义 沿 Z 轴 的 3D 旋转 
perspective(n) 定义 3D 转换 元 素 的 透视 视图 


【 例 14.9】 

表 14-2 和 表 14-3 列 出 了 一 系列 CSS 3 中 支持 3D 转换 的 属性 和 方法 ， 本 例 介绍 如 何 使 
用 rotateX()、rotateY() 和 rotateZ() 方 法 实现 3D 旋转 效果 。 实 现 步骤 如 下 。 

鸭 玉 01| 向 页 面 中 添加 3 个 滑 块 、 一 个 span 元 素 和 一 张 图 片 。 页 面 代 码 如 下 : 


X 轴 : <input id="myx" type="range" min="1" max="360" step="1" 
onChange="ChangeRotate()" /> 

Y 轴 : <input id="myy" type="range" min="1" max="360" step="1" 
onChange="ChangeRotate()" /> 

2 轴 : <input id="myz" type="range" min="1" max="360" step="1" 
onChange="ChangeRotate()" /> 

<span id="show"></span><br/><br/> 

<img id="myimg" src="images/first.jpg" width="300" height="200" 
style="padding-top:50px;"> 


国 加 02| 在 上 个 步骤 中 ， 为 每 一 个 range 类 型 的 input 元 素 添加 了 Change 事件 。 改 
变 滑 块 时 会 调用 ChangeRotate0 函 数 达到 旋转 效果 。 函 数 代码 如 下 ; 


function ChangeRotate (){ 
Var x = document .getElementByYId ("myx") .value; 
var y = document .getElementById ("myy") .value; 
Var z = document .getElementBylId ("myz") .value; 
Var show = document .getElementById ("show"); 
show.innerHTML = "X 轴 旋转 "+x+" 度 ，Y 轴 旋 转 "+y+" 度 ，z 轴 旋 转 "+z+" 度 "; 
Var img = document .getElementById ("myimg"); 
img.style.webkitTransform = "rotateX("+x+"deg)"; 
img.style.webkitTransform += "rotateY ("+yt+"deg)"; 
img.style.webkitTransform += "rotateZz ("+z+"deg)"; 
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上 述 代码 首先 获取 滑 块 沿 着 义 轴 、Y 轴 和 Z 轴 旋 转 的 角度 ， 接 着 将 旋转 角度 显示 到 页 
面 ， 然 后 再 获取 页 面 中 的 图 片 对 象 ， 最 后 通过 webkitTransform 属性 设置 旋转 效果 。 
地 关 03 | 页 面 加 载 时 自动 调用 ChangeRotate0 函 数 实现 旋转 ， 代 码 如 下 : 


window.onload = ChangeRotate(); 


国 轨 04| 在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 如 图 14-16 所 示 。 
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国 玫 05| 分 别 拖 动 图 14-16 中 的 滑 块 实现 X 轴 、Y 轴 和 Z 轴 的 旋转 ，X 轴 旋 转 120 
度 、Y 轴 旋 转 50 度 、Z 轴 旋 转 38 度 时 的 效果 如 图 14-17 所 示 。 
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be 和 山 : 础 : 


X 加 旋转 120 度 ，Y 负 旋转 50 度 ，Z 名 旋转 38 度 


14-17 图片 旋转 效果 


权 号 提示 : 本 节 介绍 了 多 个 3D 转换 的 属性 和 方法 ， 上 述 示例 演示 iotateX0、rotateY0 
和 rotateZ( 方 法 的 使 用 。 读 者 还 可 以 使 用 表 14-2 和 表 14-3 中 的 属性 和 方法 进行 练习 ， 
这 里 不 再 动手 实现 。 
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CSS 3 中 新 增加 了 过 渡 属 性 ， 使 用 这 些 属性 可 以 在 不 使 用 Flash 动画 或 者 JavaScript 的 
情况 下 ， 当 元 素 从 一 种 样式 变换 为 男 一 种 样式 时 为 元 素 添加 效果 。 简 单 地 说 ，CSS 3 过 渡 
是 指 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 的 效果 。 要 实现 这 一 点 ， 必 须 指定 两 项 内 容 ， 指 定 
希望 把 效果 添加 到 哪个 CSS 属性 上 ; 指定 效果 的 时 长 。 


(4.3.1 常用 的 单个 属性 
CSS 3 中 新 增加 了 多 个 属性 ， 本 节 首 先 介绍 实现 过 渡 时 常用 的 4 个 属性 :transition- 


property、transition-duration、transition-timing-function 和 transition-delay 属性 。 


1.， transition-property 属 性 


transition-property 属性 指定 应 用 过 渡 效 果 的 CSS 属性 的 名 称 ， 过 渡 效 果 通 常 在 用 户 将 
鼠标 指针 浮动 到 元 素 上 时 发 生 。 当 指定 的 CSS 属性 改变 时 ， 过 渡 效 果 将 开始 。transition- 
property 属性 的 基本 语法 如 下 : 

transition-property: none | all | property; 

从 上 述 语 法 可 以 看 出 :transition-property 属性 的 可 能 取 值 包括 none、all 和 property， 
说 明 如 下 。 

@ none: 没有 属性 会 获得 过 渡 效 果 。 

@ all: 所 有 属性 都 将 获得 过 渡 效 果 。 

@ ”property: 定义 应 用 过 渡 效 果 的 CSS 属性 名 称 列表 ， 列 表 以 逗号 分 隔 。 


权 提示 : 在 脚本 中 设置 transition-property 属性 时 使 用 的 代码 是 object.style. 

transitionProperty 二 “width,height”"。 使 用 该 属性 或 下 面 介绍 的 属性 时 也 需要 考虑 到 浏览 器 
的 泻 染 引擎 ， 例 如 对 Chrome 浏览 器 来 说 ， 需 要 添加 Webkit 私有 属性 ， 即 脚本 实现 代码 
是 object.style.WebkitTranstionProperty=“width,height”。 


2. transition-duration 属 性 


在 使 用 transition-property 属性 时 ， 必 须 设 置 transition-duration 属性 ， 和 否则 时 长 为 0， 
就 不 会 产生 任何 过 渡 效 果 。transition-duration 属性 用 于 指定 过 渡 经 过 的 时 间 ， 即 指定 从 旧 
样式 属性 换 到 新 样式 需要 多 长 时 间 才 能 完成 ， 默 认 单位 是 秒 或 者 毫秒 。 如 果 将 该 属性 的 值 
设置 为 非 负数 或 者 不 设置 ， 则 会 被 视 为 0。 该 属性 的 基本 语法 如 下 : 


transition-duration: time; 


【 例 14.10】 
本 例 通 过 设置 transition-property 和 transition-duration 属性 在 2 秒 内 实现 div 元 素 宽 度 
”和 高 度 从 100 到 200 的 过 渡 。 步 又 如 下 。 


国有 到 01] 向 页 面 中 添加 div 元 素 ， 这 里 省 略 页 面 代码 。 
国 轨 02| 为 div 元 素 指定 样式 ， 设 置 该 元 素 的 宽度 、 高 度 、 背 景 颜色 以 及 过 渡 名 称 
和 过 渡 时 间 。 主 要 代码 如 下 : 
divt{ 
width: 100px; 
height: 100px; 
background: -webkit-linear-gradient (left top,blue, green); 


Ee 


涤 蒂 国 间 8SSO 册 引 中 驴 


-webkit-transition-property: width,height7 /* 过 渡 名 称 是 width */ 
-webkit-transition-duration: 2s; /* 过 渡 时 间 为 2 秒 */ 


/* 省 略 其 他 浏览 器 的 私有 属性 设置 */ 


国 罚 03| 为 div 元 素 指定 悬浮 时 的 效果 ， 悬 浮 时 该 元 素 的 宽度 和 高 度 都 为 200 像 

这 里 省 略 悬 浮 时 的 样式 代码 。 

国 久 04| 在 浏览 器 中 运行 上 述 代码 进行 测试 ， 将 鼠标 指针 悬浮 到 div 元 素 ， 查 看 效 
果 ， 过 渡 时 的 效果 如 图 14-18 所 示 。 
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14-18 ”宽度 和 高 度 过 渡 时 的 效果 


3. transition-timing-function 属 性 


transition-timing-function 属性 指定 过 渡 效 果 的 时 间 曲 线 。 基 本 语法 如 下 : 
transition-timing-function: linear | ease | ease-in | ease-out 
| ease-in-out | cubic-bezier(n,n,n,n); 

从 上 述 语法 中 可 以 看 出 ，transition-timing-function 属性 的 取 值 有 6 个 ， 说 明 如 下 。 

e@ linear: 默认 值 ， 指 定 切换 效果 以 相同 速度 从 开始 到 结束 。 将 属性 值 设置 为 linear 
的 效果 等 同 于 cubic-bezier(0.0,0.0,1.0,1.0)。 

@ ”ease: 指定 一 个 缓慢 的 开始 ， 然 后 加 快 ， 最 后 慢 慢 结束 。 属 性 值 设 置 为 ease 的 效 
果 等 同 于 cubic-bezier(0.25,0.1,0.25,1.0)。 

e@ ease-in: 指定 一 个 缓慢 的 开始 ， 然 后 逐渐 加 速 ( 淡 入 效果 )。 属 性 值 设 置 为 ease-in 
的 效果 等 同 于 cubic-bezier(0.42,0,1.0,1.0)。 

@ ”ease-out: 指定 一 个 缓慢 的 结束 (淡出 效果 )。 等 同 于 cubic-bezier(0,0,0.58,1.0)。 
ease-in-out: 指定 加 速 后 再 减速 。 等 同 cubic-bezier(0.42,0,0.58,1)。 > 
cubic-bezier(n,n,n,n): 定义 用 于 加 速 或 者 减速 的 贝 塞 尔 曲线 的 形状 ， 它 们 的 值 在 oY) 
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0~1 之 间 。 
【 例 14.11】 
继续 在 上 个 示例 的 基础 上 进行 更 改 ， 指 定 切换 效果 为 加 速 后 再 减速 。 代 码 如 下 : 
divt{ 
-webkit-transition-property: width,height; /* 过 渡 名 称 是 width */ 
—webkit-transition-duration: 2s; /* 过 渡 时 间 为 2 秒 */ 
—webkit-transition-timing-function:ease-in-out; 
/* 省 略 其 他 属性 设置 */ 


} 


4. transition-delay 属 性 
transition-delay 属性 指定 过 渡 效 果 何 时 开始 。 该 属性 的 默认 值 为 0， 其 单位 是 秒 或 者 毫 


秒 。 基 本 语法 如 下 : 
transition-delay: time; 
【 例 14.12】 
继续 在 前 面 示例 的 基础 上 添加 样式 ， 在 实现 过 渡 效 果 之 前 延 时 5 秒 钟 。 代 码 如 下 : 
divt{ 


-webkit-transition-property: width,height; 
-webkit-transition-duration: 2s; 
-webkit-transition-timing-function: ease-in-out; 
-webkit-transition-delay: 2s; 
/* 省 略 其 他 属性 */ 

} 


(4.32 transition 的 简写 属性 


transition 是 一 个 简写 属性 ， 用 于 在 一 个 属性 中 设置 4 个 过 渡 属 性 ， 这 4 个 属性 在 上 一 
节 中 已 经 提 到 。transition 属性 的 基本 语法 如 下 : 


transition: property duration timing-function delay; 


在 使 用 transition 属性 设置 过 渡 效果 时 ， 它 的 各 个 参数 必须 按照 顺序 进行 定义 ， 不 可 以 
进行 颠倒 。 

例如 ， 针 对 例 14.10、 例 14.11 和 例 14.12， 可 以 直接 通过 以 下 代码 实现 : 

di 


vi{ 
/* 省 略 其 他 属性 */ 
transition: width,height 2s ease-in-out 2s; 


} 


i 无 论 是 单个 属性 还 是 简写 属性 ， 使 用 时 都 可 以 实现 多 个 过 渡 效 果 ， 需 要 为 
每 个 过 渡 集 中 指定 所 有 的 值 ， 并 且 使 用 喜 号 进行 分 隔 。 


NN 


14.4 动 男 


CSS 3 中 除了 支持 渐变 、 过 渡 和 转换 特效 外 ， 还 可 以 实现 动画 效果 。 动 画 是 让 元 素 从 
一 个 样式 逐渐 改变 到 另 一 个 样式 。 本 节 首 先 介绍 与 动画 有 关 的 属性 ， 接 着 介绍 动画 帧 一 一 
@keyframes。 


(44.1 动画 相关 属性 


通过 CSS 3，Web 开发 者 可 以 创建 动画 ， 这 可 以 在 许多 网 页 中 取代 动画 图 片 、Flash 动 
画 以 及 JavaScript 脚本 。 
CSS 3 中 新 增加 了 许多 动画 属性 ， 这 些 属性 及 其 说 明 如 表 14-4 所 示 。 
表 14-4 CSS 3 中 新 增 的 动画 属性 
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属性 名 称 说 明 
animation-name 指定 @keyframes 动画 的 名 称 
animation-duration 指定 动画 完成 一 个 周期 所 花费 的 秒 或 毫秒 。 默 认 值 是 0 
animation-timing- 指定 动画 的 速度 曲线 。 取 值 说 明 如 下 。 
function 。 linear: 动画 从 头 到 尾 的 速度 是 相同 的 。 


。 ease: 动画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 。 

。 ease-in: 动画 以 低速 开始 。 

。 ”ease-out: 动画 以 低速 结束 。 

。 ”ease-in-out: 动画 以 低速 开始 和 结束 。 

。_cubic-bezier(n,n,n,n): 在 函数 中 指定 自己 的 值 ， 可 能 是 从 0~1 的 数值 


animation-dela; 指定 动画 何 时 开始 。 默 认 值 是 0 

animation-iteration- 指定 动画 被 播放 的 次 数 。 默 认 值 是 1， 将 属性 值 指 定 为 infinite 时 ， 表 示 动 
count 画 循环 播放 ， 即 永远 播放 

animation-direction 规定 动画 是 否 在 下 一 周期 逆向 地 播放 。 默 认 值 是 normal， 表 示 动 画 每 次 都 


会 正常 显示 ; 还 可 以 指定 为 alternate， 表 示 交 替 逆向 运动 ， 即 动画 正 向 播放 
奇数 次 迭代 ， 反 向 播放 偶数 次 迭代 
animation-play-state 规定 动画 是 否 正 在 运行 或 暂停 。 默 认 值 是 running， 表 示 动 画 正常 运行 ， 还 
可 以 是 paused， 表 示 和 暂停 动画 
animation-fill-mode 规定 对 象 动画 时 间 之 外 的 状态 ， 取 值 说 明 如 下 。 
。 none: 默认 值 ， 按 定义 的 顺序 执行 ， 且 完成 后 返回 到 初始 的 关键 帧 。 
。 backwards: 指定 关键 帧 在 动画 开始 前 应 用 样式 。 
。 forwards: 指定 关键 帧 在 动画 结束 后 才 应 用 样式 。 
e both: 同时 应 用 forwards 和 backwards 的 效果 


除了 上 述 属 性 外 ， 还 包括 一 个 animation， 该 属性 是 表 中 所 有 动画 属性 ( 除 animation- 
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play-state) 的 简写 属性 。 基 本 语法 如 下 : 


animation: name duration timing-function delay iteration-count direction; 


【 例 14.13】 

本 例 演 示 上 述 动画 属性 ， 首 先 需要 向 页 面 中 添加 一 个 div 元 素 ， 并 且 指定 该 元 素 的 id 
属性 值 ， 页 面 代码 不 再 显示 。 接 着 为 该 div 元 素 指 定 宽度 、 高 度 、 背 景 、 所 处 位 置 以 及 动 
画 属性 和 多 个 样式 属性 。 部 分 代码 如 下 : 

#mydiv{ 

width: 100px; 
height: 100px; 
background: red; 
position: relative; 


-webkit-animation-name: myfirst; /* 动 画 名 称 */ 
-webkit-animation-duration: 5s; /* 动 画 完 成 一 个 周期 的 花费 时 间 */ 
-webkit-animation-timing-function: linear; /* 动 画 的 速度 曲线 */ 
-webkit-animation-delay: 2s; /* 延 迟 时 间 */ 
-webkit-animation-iteration-count: infinite;  ”/* 循 环 播放 动画 */ 
-webkit-animation-direction: alternate; /* 动 画 交 替 运 动 */ 
-webkit-animation-play-state: running; /* 运 行动 画 */ 


/* 省 略 其 他 私有 属性 */ 
} 


上 述 属 性 可 以 直接 通过 animation 属性 和 animation-play-state 属性 来 代替 实现 。 具 体 代 


码 如 下 : 
#mydiv{ 
-webkit-animation: myfirst 5s linear 2s infinite alternate; 
-webkit-animation-play-state: running; /* 运 行动 画 */ 


/* 省 略 其 他 属性 */ 
| 


(44.2 @keyframes 


读者 在 浏览 器 中 运行 上 述 代码 时 可 以 发 现 ， 在 浏览 器 页 面 除了 显示 一 个 长 度 和 宽度 为 
100 像素 的 矩形 外 ， 没 有 任何 别 的 效果 。 这 还 需要 指定 一 个 关键 的 属性 一 一 @keyframes。 
@keyframes 用 于 定义 关键 帧 ， 一 个 关键 帧 表示 动画 过 程 中 的 一 个 状态 。 基 本 语法 如 下 : 

@keyframes animationname { 


keyframes-selector {css-styles;} 


} 

在 上 述 语 法 中 ，animationname 是 必需 的 ， 它 定义 关键 帧 的 名 称 ， 它 是 一 个 唯一 标识 ， 
其 值 指定 animation-name 属性 的 值 。 

keyframes-selector 也 是 一 个 必需 参数 ， 它 指定 当前 关键 帧 应 用 到 整个 动画 过 程 中 的 位 
置 ， 该 参数 的 值 可 以 是 fom、to 或 者 百分比 ， 其 中 from 和 0% 的 效果 相同 ， 即 动画 开始 ; 
to 和 100% 的 效果 相同 ， 即 动画 结束 。 

css-styles 也 是 必需 的 ， 它 定义 一 个 或 多 个 合法 的 CSS 样式 属性 ， 多 个 属性 之 间 使 用 喜 


号 进行 分 隔 。 
【 例 14.14】 
在 上 个 示例 的 基础 上 定义 关键 帧 ， 指 定 动画 不 同 阶段 时 的 背景 颜色 和 运行 距离 。 代 码 
如 下 : 
Q@-webkit-keyframes myfirst{ 
0% {background:red; left:0px; top:0px;} 
25%$ {background:yellow; left:600px; top:0px;} 
50% {background:blue; left:600px; top:200px;} 
75% {background:green; left:0px; top:200px;} 
100% {background:red; left:0px; top:0px;} 
} 
从 上 述 代码 中 可 以 看 出 ，@keyframes 与 动画 和 过 渡 等 相关 属性 一 样 ， 也 需要 指定 私有 
在 浏览 器 中 运行 上 述 代码 ， 查 看 效果 ， 初 始 效果 如 图 14-19 所 示 。 延 迟 两 秒 钟 后 ， 动 
画 开始 运行 ， 捕 提 某 一 时 刻 的 动画 ， 效 果 如 图 14-20 所 示 。 
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图 14-19 ”动画 初始 效果 14-20 ” 某 一 时 刻 的 效果 


14.5 ”实战 一 一 制作 动画 海报 圈 


在 本 节 之 前 ， 我 们 已 经 简单 了 解 了 CSS 3 中 新 增 的 与 渐变 、 转 换 和 过 渡 有 关 的 属性 ， 
本 节 实 战 利 用 先前 介绍 的 知识 实现 一 个 比较 完整 的 动画 效果 。 

在 制作 动画 海报 圈 时 ， 三 个 环 构造 使 用 简单 的 JavaScript 脚本 来 控制 ， 创 建 元 素 并 为 
它们 指定 转换 ， 然 后 使 用 CSS 动画 旋转 海报 圈 的 每 一 环 ， 并 旋转 周围 的 包含 元 素 。 实 现 步 
又 如 下 。 

国 01] 向 页 面 中 添加 hl 元 素 和 div 元素， 使 用 一 个 div 元 素 作为 背景 墙 ， 里面 嵌 

入 3 个 子 元 素 ， 每 个 子 元 素 为 海报 圈 的 一 部 分 。 页 面 代码 如 下 : 
<h1> 制 作 海报 圈 </h1> 

<div id="stage"> 

<div id="rotate"> 
<div id="ring-1" class="ring"></div> 
<div id="ring-2" class="ring"></div> 
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<div id="ring-3" class="ring"></div> 
</div> 
</div> 


国 轨 02| 为 id 属性 值 是 stage 的 div 元 素 定义 样式 ， 指 定 该 元 素 的 宽度 和 高 度 等 内 
容 。 代 码 如 下 : 


#stage 
margin: 80px auto; 
width: 600px; 
height: 400px; 
-webkit-perspective: 800; /* 指 定 3D 元 素 的 透视 效果 */ 


为 id 属性 值 是 rotate 的 div 元 素 定义 样式 ， 指 定 该 元 素 的 宽度 、 高 度 和 动 
画 等 属性 。 代 码 如 下 : 
#rotate { 

margin: 0 auto; 

width: 600px; 

height: 400px; 


-webkit-transform-style: preserve-3d; /* 确 保 在 3D 空间 运行 */ 
-webkit-animation-name: x-spin; /* 动 画 名 称 */ 
-webkit-animation-duration: 7s; /x* 延 迟 7 秒 */ 


-webkit-animation-iteration-count: 5; /* 循 环 播放 */ 
-webkit-animation-timing-function: linear; /* 以 同等 速度 播放 动画 */ 
| 


为 class 属性 值 是 ring 的 3 个 div 元 
以 及 第 奇数 个 和 第 偶数 个 7 


“ring + 
margin: 0 auto; 
height: 110px; 
width: 600px; 
-webkit-transform-style: preserve-3d; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 


添加 样式 ， 包 含 宽度 、 高 度 、 动 画 ， 
的 背景 颜色 。 内 容 如 下 : 


1 

.ring > :nth-child(odd) { 
background-color: #FF93C9; 

} 

.ring > :nth-child(even) { 
background-color: #9B9BFF; 

} 


分 别 为 id 属性 值 是 ring-1、ring-2 和 ring-3 的 div 元 素 指定 样式 ， 通 过 
animation-name 指定 动画 名 称 ， 通 过 animation-duration 指定 动画 延迟 时 间 。 代 码 
如 下 : 


#ring—1 { 
-webkit-animation-name: y-spin; 
-webkit-animation-duration: 5s; 


#ring-2 { 
-webkit-animation-name: back-y-spin; 
-webkit-animation-duration: 4s; 

} 

#ring-3 { 
-webkit-animation-name: y-spin; 
-webkit-animation-duration: 3s; 


} 


国事 06| 通过 @keyframes 定义 名 称 是 x-spin 的 动画 ， 这 表示 整个 组 行使 用 X 轴 旋 转 
动画 时 的 效果 。 代 码 如 下 : 

@-webkit-keyframes x-spin { 
0% {-webkit-transform: rotateXx(0deg);} 


50% {-webkit-transform: rotateX(180deg);} 
100% {-webkit-transform: rotateXx(360deg);} 
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分 别 通过 @keyframes 定义 名 称 是 y-spin 和 back-y-span 的 动画 ， 它 们 表示 
整个 组 行使 用 立轴 旋转 动画 时 的 效果 。 代 码 如 下 : 


Q@-webkit-keyframes y-spin { 
0% {-webkit-transform: rotateY (0deg);} 
50% {-webkit-transform: rotateY (180deg);} 
100% {-webkit-transform: rotateY (360deg);} 
} 
Q@-webkit-keyframes back-y-spin { 
0% {-webkit-transform: rotateY(360deg);} 
50% {-webkit-transform: rotateY (180deg);} 
100% {-webkit-transform: rotateY (0deg);} 


[08 | 添加 JavaScript 脚本 代码 ， 首 先 在 外 部 声明 两 个 常量 ， 然 后 通过 setup_ 
posters(0) 函 数 定义 海报 。 代 码 如 下 : 

const POSTERS PER ROW = 12; // 定 义 海报 的 行 

const RING RADIUS = 200; // 定 义 圆 角 特效 

function setup posters (row) { 
var posterAngle = 360 / POSTERS PER ROW; 
for (var i=0; i<POSTERS PER ROW; i++) { 

Var poster = document .createElement ('div'); 


poster.className = 'poster'; 
// 计算 和 分 配 海报 的 转换 
var transform = 'rotateY(' + (posterAngle * i) 


+ "deg) translateZz(' + RING RADIUS + 'px)'; 
poster.style.webkitTransform = transform; 
// 设 置 显示 在 海报 中 的 数字 
Var content = poster.appendChild(document .createElement ('p')); 
content.textContent = i; 
row.appendChild (poster); // 海 报 添加 到 行 


[09 | 继续 添加 JavaSeript 脚本 ， 页 面 加 载 完 成 后 分 别 调用 setup_posters0 函 数 ， CA 
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并 传 入 不 同 的 div 子 元 素 。 代 码 如 下 : 


window.onload = function(){ 
setup posters (document .getElementById('ring-1')); 
setup posters (document .getElementById('ring-2')); 
setup posters (document .getElementById('ring-3')); 


葬 10| 添加 元 素 的 其 他 样式 或 私有 属性 特效 ， 例 如 步骤 08 中 class 属性 值 是 
poster 的 样式 ， 这 里 省 略 其 他 代码 。 

鳃 为 11| 所 有 的 页 面 代码 和 样式 代码 添加 完毕 后 ， 运 行 页 面 ， 页 面 运行 时 已 经 开始 
动画 。 为 了 演示 静态 效果 ， 可 以 首先 注释 掉 @keyframes 属性 的 设置 ， 此 时 的 效果 
如 图 14-21 所 示 。 


区 二 = 
个  @ ofle//D/htmis/highoper/example html 


制作 海报 团 


14-21 ”海报 圈 的 静态 效果 


取消 对 @keyframes 属性 的 注释 ， 然 后 刷新 页 面 观察 动画 ， 图 14-22 显示 了 
某 一 时 刻 海报 圈 的 动画 效果 。 


了 We 
全 3 CO fie///D/htmis/highoper/example html 


制作 海报 圈 


14-22 海报 圈 某 一 时 刻 的 动画 效果 
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14.6 本 章 习 题 
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1. 填空 题 

(1) 实现 渐变 效果 时 ， 使 用 Webkit 引擎 的 浏览 器 需要 添加 私有 属性 。 

(2 是 指 从 起 点 到 终点 、 闫 色 从 内 到 外 进行 的 圆 形 渐变 。 

(3) 在 实现 过 渡 效 果 时 ，transition-duration 属性 的 默认 值 是 

(4) 属性 将 与 过 渡 有 关 的 4 个 属性 进行 了 简写 。 

(5) animation-play-state 属性 的 值 设 置 为 时 ， 表 示 动 画 正常 运行 。 

2. 选择 题 

(1) 在 下 面 的 方法 中 ， 方法 定义 2D 转换 ， 沿 着 义 轴 和 YY 轴 移 动 元 素 。 
A. transform(x,y) B. translate(x,y) 
C. translateX(n) D. translateY(n) 

(2) 属性 用 于 设置 过 渡 效 果 的 名 称 。 


A. transition-property B. transition-duration 
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C. transition-timing-function D. transition-delay 
(3) 当 transition-timing-function 属性 取 值 为 时 ， 表 示 指 定 一 个 缓慢 的 开 
然后 逐渐 加 速 ( 淡 入 效果 )。 


A. ease B. ease-in 


这 


C. ease-out D. ease-in-out 
(4) 用 于 定义 动画 的 名 称 。 
A. animation-timing-function B. animation-duration 
C. animation-name D. animation-property 
(5) animation-fill-mode 属性 指定 对 象 动画 时 间 之 外 的 状态 ， 默 认 值 为 
A. forwards B. none 
C. backwards D. both 


3. 上 机 练习 


(1) 为 相框 指定 渐变 和 阴影 效果 

利用 本 章 介绍 的 内 容 实 现 一 个 渐变 效果 ， 为 一 张 图 片 添加 边框 ， 同 时 指定 边框 的 阴影 
效果 和 渐变 颜色 ， 实 现 效 果 如 图 14-23 所 示 。 

如 下 代码 为 渐变 颜色 : 

background: -webkit-linear-gradient (right, rgba(255,255,255,0), 

rgba(255.255,2557 1)), mrli(insert.jpg)s 

(2) 实现 3D 图 片 墙 翻转 效果 

根据 本 章 的 实战 模拟 实现 一 个 3D 图 片 墙 的 翻转 效果 ， 每 一 行 图 片 在 不 同 的 时 间 周 期 
运行 不 一 致 的 翻转 动画 ， 某 一 时 刻 的 效果 如 图 14-24 所 示 。 
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14-23 ”上 机 练习 (1) 的 效果 
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14-24 ”3D 图 片 墙 翻转 效果 
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HTML 5 + CSS 3 页 面 案例 


本 书 前 面 的 14 章 详细 介绍 了 HTML 5 技术 、CSS 3 技术 以 及 JavaScript 技 
术 ， 本 章 结合 这 3 种 技术 ， 实 现 页 面 的 综合 效果 。 


本 章 学 习 目 标 : 

了 解 贪 吃 蛇 小 游戏 的 设计 

掌握 页 面 贪 吃 蛇 的 实现 

掌握 HIML 5 技术 与 JavaScript 技术 的 结合 
掌握 HIML 5 技术 与 jQuery 技术 的 结合 
掌握 HIML 5 技术 与 CSS 3 技术 的 结合 
掌握 CSS 3 技术 与 JavaScript 技术 的 结合 
掌握 常见 的 几 种 页 面 特 效 


eeeee 
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15.1 JavaScript 经 典 贪 吃 蛇 


贪 吃 蛇 是 一 款 经 典 的 小 游戏 ， 通 常 在 页 面 中 使 用 Flash 来 实现 。 在 HTML 5 技术 出 现 
以 后 ， 该 游戏 可 以 通过 HTML 5 技术 与 JavaScript 技术 相 结合 的 方式 ， 在 页 面 中 实现 。 

本 节 详 细 介绍 贪 吃 蛇 的 页 面 实现 ， 使 用 HTML 5 技术 与 JavaScript 技术 完成 贪 吃 蛇 的 
游戏 设计 ， 并 通过 CSS 3 技术 对 页 面 进行 美化 。 


GE 案例 分 析 


贪 吃 蛇 是 一 款 可 以 在 网 页 中 实现 的 小 游戏 ， 其 游戏 规则 是 通过 按键 控制 蛇 爬 行 的 转弯 
方向 ， 使 蛇 头 接触 游戏 中 随机 产生 的 食物 。 
(1) 页 面 中 需要 实现 的 事项 如 下 : 


在 
在 
使 


压 上 账 


当 
束 
当 


页 面 的 任意 位 置 随机 地 出 现 食 物 。 

页 面 的 固定 位 置 出 现 有 一 定 长 度 的 蛇 并 直线 移动 。 

用 键盘 的 上 、 下 、 左 、 右 按键 控制 蛇 转 身 。 

蛇 的 头 部 接触 食物 时 ， 被 视 为 蛇 吃 掉 了 食物 ， 蛇 的 身体 长 度 增加 ， 并 再 次 随机 
岗 新 的 食物 。 

蛇 撞 到 墙 (游戏 区 域 的 边缘 ) 的 时 候 ， 其 头 部 在 墙 的 另 一 端 出 现 (或 提示 失败 ， 结 
游戏 )。 

嘱 的 头 部 撞 到 其 自身 的 时 候 ， 提 示 失 败 ， 游 戏 结束 。 


(2) 这 个 游戏 程序 中 ，HTML 5 和 JavaScript 结合 很 紧密 ， 需 要 掌握 HTML 5 和 
JavaScript 的 基础 知识 。 上 述 游戏 规则 中 ， 可 以 把 这 些 事项 定义 为 6 个 函数 。 


蛇 
蛇 
置 
改 
放 
吃 
游 


的 移动 : 包括 定义 蛇 的 出 现 位 置 、 长 度 、 颜 色 ， 蛇 的 速度 、 息 行路 线 等 。 
撞墙 : 本 案例 当 蛇 撞墙 时 ， 蛇 从 游戏 区 域 的 另 一 端 回 到 游戏 区 域 。 因 此 蛇 头 位 
在 边界 时 ， 需 要 改变 蛇 头 位 置 。 

变 蛇 的 方向 : 根据 按键 改变 蛇 头 的 位 置 。 

置 食物 : 在 游戏 区 域内 的 随机 位 置 产生 食物 。 

到 食物 :增加 蛇 的 长 度 、 放 置 新 的 食物 。 

戏 结束 : 当 蛇 的 头 部 撞 到 其 自身 的 时 候 ， 提 示 失 败 ， 游 戏 结束 。 


HTML 5 中 有 了 canvas 元 素 和 绘制 矩形 的 函数 ， 可 以 根据 canvas 元 素 设计 游戏 的 区 
域 ， 并 在 该 区 域内 绘制 矩形 ， 分 别 绘制 蛇 和 食物 。 通 过 JavaScript 控制 矩形 的 位 置 ， 实 现 
蛇 的 移动 和 食物 的 出 现 。 


人 .2 JavaScript 实 现 


该 游戏 使 用 HIML 5 和 JavaScript 技术 ， 其 核心 是 在 页 面 中 添加 canvas 元 素 ， 通 过 
JavaScript 在 canvas 元 素 的 区 域内 绘制 矩形 并 控制 矩形 。 因 此 可 以 向 页 面 中 添加 canvas 元 
”” 素 并 定义 其 id 为 “myCanvas”; 定义 其 长 和 宽 都 为 400。 


CD 


接 下 来 是 JavaScript 的 实现 。 在 本 章 15.1.1 小 节 中 将 游戏 分 为 6 个 函数 ， 但 页 面 开始 
时 需要 执行 的 只 有 放置 食物 和 蛇 的 移动 ， 在 游戏 运行 期 间 只 能 够 改变 蛇 的 方向 。 因 此 可 将 
蛇 撞 墙 、 吃 到 食物 和 吃 到 自己 这 儿 个 函数 放 在 蛇 的 移动 函数 中 。 这 些 函 数 将 在 蛇 移 动 的 同 
时 被 依据 条 件 选择 性 地 执行 。 
在 JavaScript 中 实现 贪 吃 蛇 的 步 又 如 下 。 
国 缉 01| 首先 在 <scripe> 标 记 下 定义 蛇 的 基本 数据 ， 分 别 定义 蛇 的 速度 、 初 始 位 置 、 
食物 位 置 、 蛇 的 长 度 、 疏 行路 径 、 数 据 单位 和 位 移 改变 量 ， 代 码 如 下 : 
Var c = document.getElementById("myCanvas") 7 
var time = 300; // 蛇 的 速度 
Var cxt = c.getContext ("2d"); 
var x = y= 32; 
var a = 0; // 食 物 坐 标 
var 七 = 8; // 蛇 身长 
var map = []; // 记 录 蛇 运行 路 径 
var size = 8; // 蛇 身 单元 大 小 
var direction = 2; // 位 置 改变 量 : 1 向 上 2 向 右 0 向 左 3 向 下 
接 下 来 定义 食物 的 放置 ， 其 实质 是 在 canvas 元 素 区 域内 的 随机 位 置 绘制 逢 
形 。 由 于 食物 在 游戏 开始 的 时 候 就 需要 显示 ， 因 此 在 定义 了 该 函数 之 后 需要 直接 
在 <scrip 人 标记 下 运行 ， 代 码 如 下 : 
function rand frog() { 
a = Math.ceil (Math.random() * 50) 
cxt.fillstyle = "#00B100"; // 内 部 填充 颜色 


cxt .strokeStyle = "#00B100"; // 边 框 颜色 
cxt.fillRect (a * 8，a * 8，8，8); // 绘 制 矩形 


这 将 避 别 E SSo +9 1NLH 翰 91 泊 时 


} 
rand frog(); 


区 加 03| 最 后 是 比较 重要 的 环节 ， 蛇 的 移动 和 改变 方向 。 蛇 的 移动 需要 使 用 蛇 的 位 
置 改 变量 ， 而 这 个 量 在 改变 蛇 的 方向 时 会 发 生变 化 。 首 先 定义 蛇 的 改变 方向 函 
数 ， 改 变 蛇 的 位 置 改 变量 ， 代 码 如 下 : 


document .onkeydown = function (e) { // 改 变 蛇 方向 
Var code = e.keyCode - 37; 
switch (code) { 
case 1: direction 
case 2: direction 
case 3: direction 
case 0: direction 


2 Dreak: /7 
; break; // 右 
; break; // 下 
; break; // 左 


[| 


口 wN 


} 


国 玉 04| 蛇 的 移动 只 需要 根据 蛇 的 位 置 改变 量 来 改变 蛇 头 坐标 ， 并 根据 蛇 的 长 度 给 
制 矩 形 ， 在 蛇 移 动 过 程 中 ， 保 持 蛇 的 长 度 ， 清 除 移动 时 蛇 尾 的 矩形 块 。 
这 个 过 程 中 有 蛇 撞 墙 的 事件 、 吃 食物 的 事件 和 咬 到 自己 的 事件 。 排 除 这 儿 个 事件 ， 蛇 
的 移动 代码 如 下 : 0 A 


function set game speed() { // 移动 蛇 
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switch (direction) { 


case 1: y= y - size; break; 
case 2: x = x + size; break; 
case 0: x = x - size; break; 
case 3: y = y + size; break; 


} 
if (map.length > t) { // 保 持 蛇 身 长 度 ， 去 掉 尾 部 矩形 块 
var cl = map.shift(); // 删 除数 组 第 一 项 ， 并 且 返 回 原 元 素 
(4 
} 
map.push({ 'x': x,，'y': y }); // 将 数据 添加 到 原 数 组 尾部 
cxt.fillstyle = "#00B100"; // 内 部 填充 颜色 
cxt -strokeStyle = "#00B100"; // 边 框 颜色 
cxt.fillRect (x，y，size，size); // 绘 制 矩 形 


解决 碰壁 问题 。 蛇 的 碰壁 发 生 在 其 蛇 头 坐标 处 在 canvas 元 素 区 域 的 边界 位 
置 时 ， 由 于 canvas 元 素 的 长 和 宽 都 是 400， 因 此 当 蛇 头 坐 标 变量 x 和 y 为 400 或 
0 时 将 碰壁 ， 此 时 只 需 将 碰壁 的 水 平 坐标 或 垂直 坐标 改 为 相反 位 置 的 临界 即 可 ， 
代码 如 下 : 


if (x > 400 || y> 400 11| x < 0 1| y < 0) { // 解 决 碰壁 问题 
if (x > 400) 


T= 
if (y > 400) 
二 人 
"i i | 
t= O00 了 
if (y < 0) 
{y= 400; } 


上 述 代码 需要 放置 在 步骤 04 的 函数 内 。 

蛇 咬 到 自己 的 情况 ， 需 要 使 用 循环 语句 来 判断 。 根 据 比 较 蛇 的 路 径 和 蛇 头 
坐标 来 确定 。 当 蛇 头 坐标 与 蛇 的 路 径 坐 标 有 重复 时 ， 则 表示 蛇 咬 到 了 自己 ,提示 
失败 并 刷新 页 面 ， 代 码 如 下 : 

for (var i=0; i<map.length; i++) { 
if (parseInt (map[i] .x)==x && parseInt (map[i].y)==y) { 

alert (" 咬 到 自己 了 ..... er 


window.location.reload(); 


} 

上 述 代码 需要 放置 到 步骤 04 的 函数 内 。 

蛇 吃 到 食物 的 情况 ， 是 指 蛇 头 位 置 与 食物 位 置 重 复 ， 需 要 水 平 坐标 与 垂直 
坐标 同时 相等 ， 此 时 需要 增加 蛇 的 长 度 ， 并 绘制 新 的 食物 ， 代 码 如 下 : 


if ((a*8)==x && (a*8)==y) { // 吃 食物 
ti 
rand Frogl)s 


上 述 代 码 需要 放置 在 步骤 04 的 函数 内 。 

步骤 ga 上 述 代 码 已 经 实现 了 蛇 的 移动 ， 由 于 蛇 的 移动 是 在 游戏 开始 时 就 执行 ， 并 
在 指定 的 时 间 间 隔 下 重复 执行 ， 因 此 需要 在 <scrip 人 标记 下 添加 语句 ， 在 指定 时 间 
间隔 下 执行 蛇 的 移动 函数 set_game_speed0， 代 码 如 下 : 


interval = window.setInterval (set game speed, time); // 移动 蛇 


为 了 显示 canvas 的 区 域 ， 为 canvas 添加 背景 色 ， 其 效果 如 图 15-1 所 示 ， 
按键 控制 了 蛇 的 转向 。 在 蛇 吃 了 几 次 食物 后 ， 其 长 度 明显 增加 ， 如 图 15-2 所 示 。 


1 可 大 ema | 
localhost13364/Henips x Ceo 1 localhost13364/Htmlps x 
€ © Dlocalhost:13364/HtmlPage3.html| ” 空 到 € 名 [Dlocalhost:13364/HtmlPage3.html ” 灾 三 
a FB 
- 
图 15-1 蛇 的 初始 大 小 图 15-2 蛇 吃 了 几 次 食物 后 


GE 页 面 美 化 


上 面 通过 HTML 5 与 JavaScript 的 结合 实现 了 贪 吃 蛇 小 游戏 ， 但 该 游戏 页 面 简单 ， 没 
有 布局 和 样式 ， 页 面 显得 单调 。 这 里 我 们 将 使 用 div 样式 ， 为 该 游戏 添加 边框 和 布局 ， 步 
又 如 下 。 
加 加 01| 首先 为 页 面 添加 div 的 定位 ， 要 求 向 左 浮动 ， 代 码 如 下 : 
div { 
float: left; 
} 
为 页 面 添加 头 部 的 div， 为 其 添加 背景 图 片 和 标题 “小 游戏 ”。 头 部 的 div 
需要 占 满 一 行 并 居中 显示 ， 其 背景 图 片 不 能 重复 并 铺 满 div， 格 式 代码 如 下 : 
ad 
width: 100%; 
background-image: url('Images/wood.jpg'); 
background-repeat: no-repeat; 


background-size: 100%; 


} 

头 部 以 下 的 部 分 设置 为 左 、 中 、 右 3 个 div， 都 使 用 靠 左 浮动 。 左 右 两 端的 
div 不 添加 内 容 ， 只 起 到 占 位 的 作用 ， 可 为 其 设置 百分比 宽度 。 中 间 的 div 中 放置 
15.1.2 小 节 中 的 canvas 元 素 ( 即 小 游戏 )。 该 区 域 使 用 白色 背景 ， 使 用 清新 的 边框 
背景 ， 并 同时 为 canvas 添加 边框 。 


~ 
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于 小 游戏 的 区 域 大 小 是 固定 的 ， 因 此 可 以 使 用 固定 大 小 的 div， 根 据 边框 的 宽度 为 
canvas 设置 上 边 距 。 其 代码 如 下 : 


-div2 
border-image: url('Images/flower.jpg'); 
border-image-width: 55px; 
border-image-slice: 10%; 
text-align: center; 
vertical-align: middle; 
background-color: #FFFFFF; 
width: 609px; 
height: 51l0px; 

1 


canvas { 
position: relative; 
top: 55pX? 
background-color: #F0DB98; 
border: lpx solid #c3c3c3; 
} 


上 述 代码 省 略 了 左右 两 个 div 的 内 容 和 样式 ， 用 户 可 自行 添加 。 如 添加 导 
航 链接 、 其 他 游戏 的 列表 或 图 表 等 。 执 行 效果 如 图 15-3 所 示 。 


15-3 ” 贪 吃 蛇 页 面 美化 


15.2 jQuery 导航 特效 


本 章 15.1 节 主 要 介绍 了 HTML 5 和 JavaScript 结合 实现 的 小 游戏 ， 本 节 主 要 介绍 由 
CSS 3 和 jQuery 结合 实现 的 导航 特效 。 


2, ( 5.2.1 jQuery 简介 
2 jQuery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 框架 。 它 是 轻 量 级 的 js 库 ， 它 兼容 


CSS 3， 还 兼容 各 种 浏览 器 (IE 6.0、FF 1.5、Safari 2.0、Opera 9.0)。 

jQuery 2.0 及 后 续 版 本 将 不 再 支持 正 6/7/8 浏览 器 。jQuery 使 用 户 能 更 方便 地 处 理 
HIML、events、 实 现 动 画 效果 ， 并 且 方 便 地 为 网 站 提供 Ajax 交互 。jQuery 还 有 一 个 比较 
大 的 优势 ， 即 它 的 文档 说 明 很 全 ， 而 且 各 种 应 用 也 说 得 很 详细 ， 同 时 还 有 许多 成 熟 的 插件 
可 供 选 择 。jQuery 能 够 使 用 户 的 HTML 页 面 保持 代码 和 内 容 分 离 ， 也 就 是 说 ， 不 用 再 在 
HTML 里 面 插入 一 堆 js 来 调用 命令 了 ， 只 需 定义 id 即 可 。 

jQuery 是 一 个 兼容 多 浏览 器 的 JavaScript 框架 ， 核 心理 念 是 “write less，do more”( 写 
得 更 少 ， 做 得 更 多 )。jQuery 在 2006 年 1 月 由 美国 人 JohnResig 在 纽约 的 barcamp 发 布 ， 
吸引 了 来 自 世界 各 地 的 众多 JavaScript 高 手 加 入 ， 由 DaveMethvin 率领 团队 进行 开发 。 如 
今 ， jQuery 已 经 成 为 最 流行 的 JavaScript 框架 ， 在 世界 前 10000 个 访问 最 多 的 网 站 中 ， 有 
超过 55% 在 使 用 jQuery。 

jQuery 是 免费 、 开 源 的 ， 使 用 MIT 许可 协议 。jQuery 的 语法 设计 可 以 使 开发 更 加 便 
捷 ， 例 如 操作 文档 对 象 、 选 择 DOM 元 素 、 制 作 动画 效果 、 事 件 处 理 、 使 用 Ajax 以 及 其 他 
功能 。 除 此 以 外 ，jQuery 提供 API， 让 开发 者 可 以 编写 插件 。 其 模块 化 的 使 用 方式 使 开发 
者 可 以 很 轻松 地 开发 出 功能 强大 的 静态 或 动态 网 页 。 

在 使 用 jQuery 的 js 库 之 前 ， 需 要 向 页 面 中 添加 如 下 语句 : 

<script src="http://www.codefans.net/ajaxjs/jQuery-1.6.2.min.js"> 

</script> 
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本 节 使 用 jQuery 实现 伸缩 导航 条 ， 通 过 CSS 为 导航 链接 设置 链接 单 击 前 后 的 样式 ， 
并 通过 jQuery 将 这 些 样 式 动态 地 显示 出 来 。 

本 节 所 介绍 的 导航 以 链接 列表 的 形式 来 呈现 ， 导 航 菜单 为 游戏 的 分 类 和 各 个 类 别 下 的 
游戏 名 称 ， 如 图 15-4 所 示 。 


图 15-4 ”导航 特效 


尖 司 呈 & SSO + SNLH 二 5 站 地 


宣 


图 15-4 中 ， 导 航 菜单 下 有 游戏 分 类 ， 而 各 个 分 类 下 有 子 菜单 。 这 些 子 菜单 以 链接 的 形 


式 呈 现 。 

使 用 HTML 中 的 a 元 素 和 列表 元 素 。 先 定义 链接 样式 ， 接 下 来 定义 jQuery 语句 ， 步 
又 如 下 。 

欧洲 01| 首先 定义 链接 的 样式 ， 链 接 的 一 般 样式 代码 如 下 ; 

-| 


color: #f£f16f0f; 
text-decoration: none; 


} 
定义 鼠标 悬 停 在 链接 上 的 样式 ， 代 码 如 下 : 


a:hover { 
Color: #f16f0f; 
text-decoration: underline; 


} 
轻 别 03| 导航 菜单 以 列表 典 套 的 形式 来 显示 ， 定 义 外 层 列 表 的 样式 ， 代 码 如 下 : 


.menu { 
margin-right: 8px; 
overflow: hidden; 
border-color: #DBBB66; 
border-style: solid; 
border-width: 0 lpx lpx; 

} 

.menu li ul { 
overflow: hidden; 

} 

国 洲 04| 定义 导航 在 鼠标 单 击 前 (展开 前 ) 的 样式 ， 即 外 层 列 表 项 的 样式 ， 具 体 代码 
如 下 : 

.menu li.levell a { 
display: block; 
height: 28px; 
line-height: 28px; 
background: #F4F4D0; 
font-weight: 700; 
color: #DBBB66; 
text-indent: 4px; 
border-top: lpx solid #DBBB66; 

} 

.menu li.levell a:hover { 
text-decoration: none; 

| 

-menu li.levell a.current { 
Color: #FFFFFF; 
background: #EAB45A; 


国 轨 05| 定义 内 层 列表 的 样式 ， 代 码 如 下 : 


CO 


menu di ul levwel2 { 
display: none; 

} 

-menu 1i ul.level2 li af{ 
display: block; 
height: 28px; 
line-height: 28px; 
background: #ffffff; 
font-weight: 400; 
color: #DBBB66; 
text-indent: 8px; 
border-top: 0px solid #DBBB66; 
overflow: hidden; 
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} 
-menu li ul.level2 1i a:hover { (这 个 什么 都 没有 吗 ? ) 


} 

上 述 5 个 步 又 定义 了 导航 的 所 有 样式 ， 接 下 来 在 页 面 中 添加 jQuery 的 js 库 
引用 ， 并 添加 jQuery 代码 ， 实 现 当前 元 素 的 子 元 素 呈 现 ， 同 时 合并 其 他 元 素 的 子 
元 素 ， 代 码 如 下 : 


<script src="http://www.codefans.net/ajaxjs/jQuery-1.6.2.min.js"> 
</script> 
<script> 
$ (document) .ready (function () { 
S${(" .levell > a") .click(function () { 
$ (this) .addClass ("current")  // 给 当前 元 素 添加 current 样式 
.next () .show ()  // 下 一 个 元 素 显示 
// 父 元 素 的 兄弟 元 素 的 子 元 素 <a> 移 除 current 样式 
.Parent () .siblings () .children("a") .removeClass ("current") 
-next () .hide (); // 它 们 的 下 一 个 元 素 隐藏 
return false; 
]) 7 
]) 7 


</script> 
国 吕 07| 向 页 面 中 添加 列表 ， 使 用 先前 定义 的 CSS 样式 。 由 于 篇 幅 有 限 ， 本 步骤 只 


提供 一 条 列表 的 添加 代码 ， 代 码 如 下 : 


<ul class="menu"> 
<1i class="levell"> 
<a href="#none"> 尊 智 游戏 </a> 
<ul class="level2"> 
<1i><a href="#none"> 拼 图 </a></1i> 
<1i><a href="#none"> 迷 宫 </a></1i> 
<1i><a href="#none"> 祖 玛 </a></1i> 
<1i><a href="#none"> 连 连 看 </a></1i> 
<1i><a href="#none"> 密 室 逃 脱 </a></1i> 
<1i><a href="#none"> 消 消 看 </a></1i> 
</ul> 
< C 
</ul> 人 fp 


力 国 08| 将 上 述 代码 放 在 本 章 15.1.3 小 节 中 页 面 的 左 侧 div 中 ， 其 效果 如 图 15-5 所 
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示 。 单 击 “ 棋 牌 游戏 ”导航 菜单 ， 其 子 菜单 如 图 15-4 所 示 。 


15-5 ”导航 样式 


15.3 CSS 3 图 片 特 效 


本 章 15.1 节 和 15.2 节 分 别 介 绍 了 HTML 5 技术 与 JavaScript 技术 的 结合 、CSS 3 技术 
和 jQuery 技术 的 结合 ， 本 节 将 通过 HTML 5 技术 与 CSS 3 技术 的 结合 ， 实 现 图 片 的 特效 。 

本 节 使 用 CSS 3 技术 对 页 面 中 的 图 片 进行 放大 (切换 ) 操 作 。 网 页 中 由 于 页 面 尺寸 有 
限 ， 一 些 需要 显示 图 片 的 地 方 使 用 小 图 片 来 呈现 ， 但 小 图 片 通常 不 能 够 满足 用 户 需求 。 因 
此 可 以 对 图 片 进行 样式 设置 ， 使 图 片 在 用 户 鼠 标 悬 浮 的 时 候 执 行 图 片 的 放大 或 切换 。 

本 节 介 绍 的 图 片 特效 是 实现 小 图 片 的 切换 。 当 用 户 鼠 标 放 在 小 图 片上 时 ， 该 图 片上 方 
将 重合 一 个 大 的 图 片 ， 对 小 图 片 进 行 解释 说 明 。 大 图 片 可 以 是 小 图 片 的 放大 图 片 ， 也 可 以 
是 对 小 图 片 的 介绍 。 

如 游戏 图 片 ， 在 鼠标 悬浮 时 可 呈现 该 游戏 的 画面 ， 本 节 在 图 15-5 的 基础 上 ， 在 页 面 的 
右 侧 div 中 添加 小 游戏 的 图 标 ， 并 在 用 户 鼠 标 悬 浮 图 标 时 呈现 该 游戏 的 画面 。 图 标 以 链接 
的 形式 呈现 ， 可 单 击 进入 该 游戏 的 页 面 。 使 用 CSS 3 和 HTML 5 的 步骤 如 下 。 

首先 定义 该 div 的 样式 ， 定 义 文本 没有 缩 进 ， 并 且 有 着 14px 的 边 距 ， 代 码 

如 下 : 


.divp { 
text-indent: 0; 
margin-left: 14px; 
} 


定义 图 标 链接 在 鼠标 悬浮 前 的 样式 ， 代 码 如 下 : 


CD 


.thumbnail { 
position: relative; 
z-index: 0; 


定义 图 标 链接 在 鼠标 悬浮 时 的 样式 ， 代 码 如 下 : 


.thumbnail:hover { 
background-color: transparent; 
z-index: 50; 


定义 图 标 在 被 鼠标 基 浮 时 ， 其 显示 的 重 辣 图 片 的 样式 。 为 图 片 添加 边框 并 
添加 说 明文 字 ， 使 用 span 元 素 。 其 样式 代码 如 下 所 示 : 


.thumbnail span { 
position: absolute; 
background-color: lightyellow; 
left: -430px; 
border: lpx dashed gray; 
visibility: hidden; 
color: black; 
text-decoration: none; 
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} 

.thumbnail span img { 
border-width: 0; 
padding: 2px; 


05 | 定义 span 元 素 在 鼠标 悬浮 时 显示 ， 代 码 如 下 : 


.thumbnail:hover span { 
visibility: visible; 
top: 0; 
ridhte Lpws 


有 06 | 为 右 侧 的 div 添加 样式 ， 可 列表 显示 游戏 图 标 。 图 标的 大 图 放 在 span 元 素 
中 显示 。 由 于 篇 幅 有 限 ， 这 里 提供 一 条 列表 的 代码 ， 一 条 列表 显示 两 个 游戏 图 
标 ， 代 码 如 下 : 


<div class="divp"> 
<ul> 
<li><a class="thumbnail" href="#thumb"> 
<img src="Images/gamels.jpg" border="0" /> 
<span> 
<img src="Images/gamell.jpg" border="0" /> 
经 典 塔 防 游戏 ~</span></a> 

&nbsp; 

<a class="thumbnail" href="#thumb"> 
<img src="Images/game2s.jpg" border="0" /> 


<span> 
<img src="Images/game21.jpg" border="0" /> 
超 苦境 防 游戏 ~</span> 
2 
人 芯 
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</a> 
</1i> 
</ul> 
</div> 


上 述 代码 的 执行 效果 如 图 15-6 所 示 。 


ex 一 一 ss 一 cd = 


15-6 ”小 游戏 的 图 标 列表 


将 鼠标 放 在 小 游戏 的 图 标 上 面 (如 “保卫 萝卜 ”的 图 标 )， 将 在 页 面 显示 该 
图 标的 游戏 画面 ， 如 图 15-7 所 示 。 


人 气 游戏 


an 一 一 sc 一 | [| . 


图 15-7 图 片 放 大 特效 


15.4 其 他 页 面 效 果 


网 页 中 的 样式 效果 有 很 多 ， 通 过 HTML 5 技术 、CSS 3 技术 以 及 JavaScript 技术 来 实 
现 。 本 节 介绍 几 种 常用 的 页 面 效果 。 


(5.4.1 页 面 悬 浮 广告 


大 多 网 站 页 面 的 左右 两 侧 ， 都 有 悬浮 的 矩形 小 广告 ， 广 告 可 以 展开 、 可 以 隐藏 。 在 如 
图 15-7 所 示 页 面 中 添加 左 侧 的 广告 框 ， 显 示 “ 关 闭 ” 和 “展开 ”按钮 来 隐藏 和 展开 图 片 。 
页 面 的 悬浮 广告 是 通过 简单 的 JavaScript 来 实现 的 ， 其 核心 是 添加 可 以 重合 的 div 
块 ， 并 通过 两 个 按钮 切换 div 块 。 
广告 在 展开 和 关闭 状态 时 显示 不 同 的 div， 两 个 div 使 用 不 同 的 广告 图 片 (关闭 状态 下 
显示 的 是 原 图 片 右 侧 截取 部 分 )， 步 骤 如 下 。 
步 和 定义 展开 状态 下 的 div 和 关闭 链接 ， 代 码 如 下 所 示 : 
<div id="Barl1190 big" style="position: absolute; z-index: 9; top: 1l0px; 
left: Opx; width: 160px; height: 284px; margin-top:200px"> 
<div id="AD1190" style="width: 160px; height: 284px; text-align: 
center; float: none" class = "adSpace"> 
<a href="/" target=" blank"> 
<img width="160" height="284" 
src="Images/guanggao.jpg" alt="" border="0"></a> 


</div> 
<div style="height: 18px; width: 100px; background: #CCCCCC; 
text-align: right; line-height: 18px;"> 
<a style="font-size: 12px; cursor: pointer;" 
onclick="bar1190 hidden() "> 关 闭 </a> 
</div> 
</div> 


定义 关闭 状态 下 的 div 和 展开 链接 ， 代 码 如 下 : 


<div id="Barl190 small" style="position: absolute; z-index: 9; top: 10px; 
display: none; left: Opx; width: 22px; height: 284px; margin-top:200px"> 
<div id="Divl" style="width: 22px; height: 284px; text-align: center; 
float: none" class="adSpace"> 
<a href="/" target=" blank"> 
<img width="49" height="283" src="Images/guanggaos.jpg" 
alt="" border="0"></a> 
</div> 
<div style="height: 18px; width: 25px; background: #CCCCCC; 
text-align: right; line-height: 18px;"> 
<a style="font-size: 12px; cursor: pointer;" 
onc1lick="bar1190 show() "> 展开 </a> 


</div> 
</div> 
区 定义 JavaScript 脚本 ， 切 换 展开 状态 和 关闭 状态 ， 代 码 如 下 : 
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<script type="text/JavaScript"> 

function bar1190 show() { 
document .getElementById("Bar1190 big') .style.display = 了 
document .getElementById('Bar1190 smal1') .style.display = "none'7 

} 

function barl190 hidden() { 
document .getElementById('Bar1190 big') .style.display = "none'7 
document .getElementById('Bar1190 small') .style.display = "''; 


| 
var autohide1190 = setTimeout ("bar1190 hidden()", 6000); 


</script> 


将 上 述 代码 放 在 如 图 15-7 所 示 的 页 面 中 ， 其 效果 如 图 15-8 所 示 。 
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图 15-8 悬浮 广告 的 展开 状态 


国 习 05]】 如 图 15-8 所 示 ， 广 告 窗 悬 浮 在 页 面 左 侧 。 单 击 悬 浮 广告 的 关闭 链接 ， 其 效 
果 如 图 15-9 所 示 。 


图 15-9 悬浮 广告 的 关闭 状态 


(5342 鼠标 特效 


鼠标 特效 也 是 页 面 中 的 常用 特效 ， 如 在 鼠标 移动 时 ， 有 着 跟随 鼠标 浮动 的 文字 或 图 
形 、 在 鼠标 悬浮 在 指定 位 置 时 出 现 不 同 的 样式 等 。 

鼠标 的 特效 需要 使 用 鼠标 事件 ， 在 本 书 第 3 章 中 有 介绍 。 除 了 鼠标 单 击 事件 以 外 ， 鼠 
标 特 效 还 包括 鼠标 移动 事件 、 鼠 标 移 到 某 元 素 之 上 的 事件 和 鼠标 移 开 事件 。 

e@ onmousemove: 鼠标 被 移动 。 

e@ ”onmouseout: 鼠标 从 某 元 素 移 开 。 

@ onmouseover: 鼠标 移 到 某 元 素 之 上 。 

根据 上 述 鼠 标 事件 ， 为 如 图 15-9 所 示 的 页 面 添加 鼠标 特效 ， 设 置 当 鼠标 放 在 头 部 “小 
游戏 ”所 在 的 div 时 ， 取 消 该 div 的 背景 图 片 ， 当 鼠标 离开 该 div 时 ， 恢 复 该 div 的 背景 图 
片 ， 步 又 如 下 。 

区 罚 01| 定义 div 的 鼠标 移入 时 的 函数 ， 修 改 其 背景 图 片 地 址 为 空 字符 串 : 


function over() { 
document .getElementById("div1") .style.backgroundImage = "url("") "7 
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} 
定义 div 的 鼠标 移出 时 执行 的 函数 ， 修 改 其 背景 图 片 地 址 为 原 地 址 : 


function out () { 
document .getElementById("dqiv1l") .style.backgroundImage = 
"url("Images/wood.jpg") "7 


} 

修改 该 div 的 这 属性 并 添加 其 鼠标 移入 事件 和 鼠标 移出 事件 ， 代 码 如 下 ; 

<div id="divl" class="divl" onmouseover="over()" onmouseout="out () "> 

运行 该 页 面 ， 当 鼠标 移 到 头 部 的 div 时 ， 其 执行 效果 如 图 15-10 所 示 。 当 
鼠标 移出 时 ， 该 div 背景 图 片 恢复 ， 如 图 15-9 所 示 。 


15-10 鼠标 移入 事件 。 A 


